feat(projects): 新增项目、执行、任务等功能

src/components/custom/business-form-dialog.vue

@@ -49,8 +49,8 @@ const visible = defineModel<boolean>({
 
 const DIALOG_WIDTH_MAP: Record<DialogPreset, string> = {
   sm: '520px',
-  md: '640px',
-  lg: '720px'
+  md: '720px',
+  lg: '960px'
 };
 
 const dialogWidth = computed(() => props.width ?? DIALOG_WIDTH_MAP[props.preset]);

src/components/custom/business-rich-text-editor.vue

@@ -0,0 +1,169 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, shallowRef, watch } from 'vue';
+import '@wangeditor/editor/dist/css/style.css';
+import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
+import type { IDomEditor, IEditorConfig, IToolbarConfig } from '@wangeditor/editor';
+import { uploadFile } from '@/service/api/file';
+
+defineOptions({ name: 'BusinessRichTextEditor' });
+
+interface Props {
+  placeholder?: string;
+  disabled?: boolean;
+  height?: number | string;
+  /** 上传目录，传给后端 directory 字段 */
+  uploadDirectory?: string;
+  /** 单张图片大小上限（MB），默认 5 */
+  maxImageSizeMB?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  placeholder: '请输入内容',
+  disabled: false,
+  height: 320,
+  uploadDirectory: undefined,
+  maxImageSizeMB: 5
+});
+
+const model = defineModel<string | null | undefined>({ default: '' });
+
+const editorRef = shallowRef<IDomEditor>();
+
+const toolbarConfig: Partial<IToolbarConfig> = {
+  excludeKeys: [
+    // 视频组
+    'group-video',
+    'insertVideo',
+    'uploadVideo',
+    // 更多样式分组
+    'group-more-style',
+    // 图片：只允许本地上传，不允许插入网络图片 URL
+    'insertImage',
+    // 超链接：业务暂不需要
+    'insertLink',
+    'editLink',
+    'unLink',
+    'viewLink'
+  ]
+};
+
+const editorConfig: Partial<IEditorConfig> = {
+  placeholder: props.placeholder,
+  readOnly: props.disabled,
+  MENU_CONF: {
+    uploadImage: {
+      maxFileSize: props.maxImageSizeMB * 1024 * 1024,
+      allowedFileTypes: ['image/png', 'image/jpeg', 'image/gif', 'image/webp', 'image/bmp'],
+      async customUpload(file: File, insertFn: (url: string, alt?: string, href?: string) => void) {
+        const result = await uploadFile(file, props.uploadDirectory);
+
+        if (result.error || !result.data) {
+          const msg = result.error?.response?.data?.msg || '图片上传失败';
+          window.$message?.error(msg);
+          return;
+        }
+
+        const url = result.data;
+        insertFn(url, file.name, url);
+      }
+    }
+  }
+};
+
+watch(
+  () => props.disabled,
+  value => {
+    const editor = editorRef.value;
+    if (!editor) {
+      return;
+    }
+
+    if (value) {
+      editor.disable();
+    } else {
+      editor.enable();
+    }
+  }
+);
+
+function handleCreated(editor: IDomEditor) {
+  editorRef.value = editor;
+}
+
+onBeforeUnmount(() => {
+  editorRef.value?.destroy();
+  editorRef.value = undefined;
+});
+
+/** 当 height 传 '100%' 或 'auto' 时启用「撑满父容器」模式 —— 父级必须有具体高度。 */
+const isAutoFill = computed(() => props.height === '100%' || props.height === 'auto');
+
+const containerClass = computed(() => ({
+  'business-rich-text-editor': true,
+  'business-rich-text-editor--auto-fill': isAutoFill.value
+}));
+
+const editorStyle = computed(() => {
+  if (isAutoFill.value) {
+    return { flex: 1, minHeight: 0, overflowY: 'hidden' as const };
+  }
+
+  return {
+    height: typeof props.height === 'number' ? `${props.height}px` : props.height,
+    overflowY: 'hidden' as const
+  };
+});
+</script>
+
+<template>
+  <div :class="containerClass">
+    <Toolbar
+      class="business-rich-text-editor__toolbar"
+      :editor="editorRef"
+      :default-config="toolbarConfig"
+      mode="default"
+    />
+    <Editor
+      v-model="model"
+      class="business-rich-text-editor__editor"
+      :style="editorStyle"
+      :default-config="editorConfig"
+      mode="default"
+      @on-created="handleCreated"
+    />
+  </div>
+</template>
+
+<style scoped lang="scss">
+.business-rich-text-editor {
+  width: 100%;
+  border: 1px solid var(--el-border-color);
+  border-radius: var(--el-border-radius-base);
+  overflow: hidden;
+  background: var(--el-bg-color);
+
+  &__toolbar {
+    border-bottom: 1px solid var(--el-border-color);
+    background: var(--el-fill-color-light);
+  }
+
+  &__editor {
+    background: var(--el-bg-color);
+  }
+
+  &--auto-fill {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    min-height: 0;
+  }
+}
+
+/* wangeditor 弹层（链接、图片菜单等）默认 z-index 偏低，提高一档避免被 ElDialog 遮挡 */
+:deep(.w-e-modal),
+:deep(.w-e-drop-panel),
+:deep(.w-e-bar-divider),
+:deep(.w-e-hover-bar) {
+  z-index: 3000 !important;
+}
+</style>

src/components/custom/business-rich-text-view.vue

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { sanitizeHtml } from '@/utils/sanitize';
+
+defineOptions({ name: 'BusinessRichTextView' });
+
+interface Props {
+  value?: string | null;
+  emptyText?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  value: '',
+  emptyText: '—'
+});
+
+const safeHtml = computed(() => sanitizeHtml(props.value));
+const isEmpty = computed(() => !safeHtml.value || safeHtml.value.replace(/<[^>]+>/g, '').trim() === '');
+</script>
+
+<template>
+  <div class="business-rich-text-view">
+    <span v-if="isEmpty" class="business-rich-text-view__empty">{{ props.emptyText }}</span>
+    <div v-else class="business-rich-text-view__content" v-html="safeHtml" />
+  </div>
+</template>
+
+<style scoped lang="scss">
+.business-rich-text-view {
+  width: 100%;
+  color: var(--el-text-color-primary);
+  font-size: 14px;
+  line-height: 1.7;
+  word-break: break-word;
+
+  &__empty {
+    color: var(--el-text-color-placeholder);
+  }
+
+  &__content {
+    :deep(p) {
+      margin: 0 0 8px;
+    }
+
+    :deep(p:last-child) {
+      margin-bottom: 0;
+    }
+
+    :deep(img) {
+      max-width: 100%;
+      height: auto;
+      border-radius: 4px;
+    }
+
+    :deep(ul),
+    :deep(ol) {
+      padding-left: 24px;
+      margin: 0 0 8px;
+    }
+
+    :deep(blockquote) {
+      padding: 6px 12px;
+      margin: 0 0 8px;
+      border-left: 3px solid var(--el-border-color);
+      color: var(--el-text-color-regular);
+      background: var(--el-fill-color-light);
+    }
+
+    :deep(table) {
+      width: 100%;
+      border-collapse: collapse;
+      margin: 0 0 8px;
+    }
+
+    :deep(table td),
+    :deep(table th) {
+      padding: 4px 8px;
+      border: 1px solid var(--el-border-color);
+    }
+
+    :deep(a) {
+      color: var(--el-color-primary);
+      text-decoration: underline;
+    }
+  }
+}
+</style>

src/components/custom/business-user-select.vue

@@ -0,0 +1,131 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+
+defineOptions({ name: 'BusinessUserSelect' });
+
+interface Props {
+  options: Api.SystemManage.UserSimple[];
+  placeholder?: string;
+  disabled?: boolean;
+  clearable?: boolean;
+  disabledUserIds?: readonly string[];
+  excludeUserIds?: readonly string[];
+  disabledLabel?: string;
+  noDataText?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  placeholder: '请选择用户',
+  disabled: false,
+  clearable: true,
+  disabledUserIds: () => [],
+  excludeUserIds: () => [],
+  disabledLabel: '',
+  noDataText: ''
+});
+
+const model = defineModel<string | null>('modelValue', {
+  default: null
+});
+
+const searchKeyword = ref('');
+const disabledUserIdSet = computed(() => new Set(props.disabledUserIds.map(id => String(id))));
+const excludeUserIdSet = computed(() => new Set(props.excludeUserIds.map(id => String(id))));
+
+const visibleOptions = computed(() => {
+  const keyword = searchKeyword.value.trim().toLocaleLowerCase();
+  const options = props.options.filter(item => !excludeUserIdSet.value.has(String(item.id)));
+
+  if (!keyword) {
+    return options;
+  }
+
+  return options.filter(item => {
+    const searchText = [item.nickname, item.username, item.deptName, item.id]
+      .filter(Boolean)
+      .join(' ')
+      .toLocaleLowerCase();
+
+    return searchText.includes(keyword);
+  });
+});
+
+function handleFilter(value: string) {
+  searchKeyword.value = value;
+}
+</script>
+
+<template>
+  <ElSelect
+    v-model="model"
+    class="w-full"
+    filterable
+    :filter-method="handleFilter"
+    :clearable="clearable"
+    :disabled="disabled"
+    :placeholder="placeholder"
+    :no-data-text="noDataText || undefined"
+  >
+    <ElOption
+      v-for="item in visibleOptions"
+      :key="item.id"
+      :label="item.nickname"
+      :value="item.id"
+      :disabled="disabledUserIdSet.has(String(item.id))"
+    >
+      <div class="business-user-select__option">
+        <span class="business-user-select__name">{{ item.nickname }}</span>
+        <span class="business-user-select__suffix">
+          <ElTag
+            v-if="disabledLabel && disabledUserIdSet.has(String(item.id))"
+            size="small"
+            type="warning"
+            effect="light"
+            disable-transitions
+          >
+            {{ disabledLabel }}
+          </ElTag>
+          <span v-if="item.deptName || item.username" class="business-user-select__meta">
+            {{ [item.username, item.deptName].filter(Boolean).join(' · ') }}
+          </span>
+        </span>
+      </div>
+    </ElOption>
+  </ElSelect>
+</template>
+
+<style scoped>
+.business-user-select__option {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  min-width: 0;
+}
+
+.business-user-select__name {
+  min-width: 0;
+  overflow: hidden;
+  color: rgb(15 23 42 / 94%);
+  font-weight: 500;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.business-user-select__suffix {
+  display: inline-flex;
+  align-items: center;
+  flex: 0 0 auto;
+  max-width: 58%;
+  gap: 8px;
+}
+
+.business-user-select__meta {
+  min-width: 0;
+  overflow: hidden;
+  color: rgb(100 116 139 / 88%);
+  font-size: 12px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+</style>

src/components/custom/table-search-fields.vue

@@ -0,0 +1,314 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { ElButton, ElCol, ElDatePicker, ElFormItem, ElInput, ElOption, ElRow, ElSelect } from 'element-plus';
+import DictSelect from './dict-select.vue';
+
+defineOptions({ name: 'TableSearchFields' });
+
+interface Option {
+  label: string;
+  value: string | number;
+}
+
+export interface SearchField {
+  /** 字段键名 */
+  key: string;
+  /** 字段标签 */
+  label: string;
+  /** 字段类型 */
+  type: 'input' | 'select' | 'date' | 'dateRange' | 'dict';
+  /** 占位列数，默认 1 */
+  span?: number;
+  /** select 类型的选项 */
+  options?: Option[];
+  /** dict 类型的字典编码 */
+  dictCode?: string;
+  /** 占位提示文本 */
+  placeholder?: string;
+}
+
+interface Props {
+  /** 绑定表单数据对象 */
+  modelValue: Record<string, any>;
+  /** 查询字段定义数组 */
+  fields: SearchField[];
+  /** 每行格子数（按钮占 1 格） */
+  columns: number;
+  /** 表单标签宽度 */
+  labelWidth?: string | number;
+  /** 格子间距 */
+  gutter?: number;
+  /** 是否禁用 */
+  disabled?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  labelWidth: 80,
+  gutter: 16,
+  disabled: false
+});
+
+interface Emits {
+  (e: 'search'): void;
+  (e: 'reset'): void;
+}
+
+const emit = defineEmits<Emits>();
+
+// 折叠/展开状态
+const expanded = ref(false);
+
+// 是否需要折叠（字段数 > columns - 1）
+const needsCollapse = computed(() => props.fields.length > props.columns - 1);
+
+// 第一行字段数（留一个位置给按钮）
+const firstRowFieldCount = computed(() => props.columns - 1);
+
+// 计算第一行字段
+const firstRowFields = computed(() => {
+  if (expanded.value || !needsCollapse.value) {
+    return props.fields.slice(0, firstRowFieldCount.value);
+  }
+  return props.fields.slice(0, firstRowFieldCount.value);
+});
+
+// 计算后续行字段（用于展开后显示）
+const remainingFields = computed(() => {
+  if (expanded.value || !needsCollapse.value) {
+    return props.fields.slice(firstRowFieldCount.value);
+  }
+  return [];
+});
+
+const firstRowButtonSpan = computed(() => {
+  return Math.floor(24 / props.columns);
+});
+
+// 计算第一行字段的 span（字段和按钮区保持同一列宽）
+const firstRowFieldSpan = computed(() => {
+  return firstRowButtonSpan.value;
+});
+
+// 计算每个字段的 span（用于后续行）
+const fieldSpan = computed(() => {
+  return Math.floor(24 / props.columns);
+});
+
+// 字段不足时补足首行空列，确保按钮区始终落在 columns 定义的最后一格。
+const firstRowPlaceholderSpan = computed(() => {
+  const emptySlotCount = Math.max(props.columns - 1 - firstRowFields.value.length, 0);
+  return emptySlotCount * fieldSpan.value;
+});
+
+function handleToggle() {
+  expanded.value = !expanded.value;
+}
+
+function handleReset() {
+  emit('reset');
+}
+
+function handleSearch() {
+  emit('search');
+}
+</script>
+
+<!-- eslint-disable vue/no-mutating-props -->
+<template>
+  <ElCard class="card-wrapper">
+    <ElForm :model="props.modelValue" :label-width="props.labelWidth" @submit.prevent @keyup.enter="handleSearch">
+      <!-- 第一行：fields + 按钮 -->
+      <ElRow :gutter="props.gutter">
+        <ElCol
+          v-for="field in firstRowFields"
+          :key="field.key"
+          class="table-search-fields__col"
+          :span="firstRowFieldSpan"
+        >
+          <ElFormItem :label="field.label">
+            <ElInput
+              v-if="field.type === 'input'"
+              :model-value="props.modelValue[field.key]"
+              :placeholder="field.placeholder"
+              clearable
+              :disabled="props.disabled"
+              @update:model-value="val => (props.modelValue[field.key] = val)"
+            />
+            <ElSelect
+              v-else-if="field.type === 'select'"
+              :model-value="props.modelValue[field.key]"
+              :placeholder="field.placeholder"
+              clearable
+              :disabled="props.disabled"
+              @update:model-value="val => (props.modelValue[field.key] = val)"
+            >
+              <ElOption v-for="opt in field.options" :key="opt.value" :label="opt.label" :value="opt.value" />
+            </ElSelect>
+            <ElDatePicker
+              v-else-if="field.type === 'date'"
+              :model-value="props.modelValue[field.key]"
+              type="date"
+              :placeholder="field.placeholder"
+              clearable
+              :disabled="props.disabled"
+              value-format="YYYY-MM-DD"
+              @update:model-value="val => (props.modelValue[field.key] = val)"
+            />
+            <ElDatePicker
+              v-else-if="field.type === 'dateRange'"
+              :model-value="props.modelValue[field.key]"
+              type="daterange"
+              :placeholder="field.placeholder"
+              clearable
+              :disabled="props.disabled"
+              value-format="YYYY-MM-DD"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              @update:model-value="val => (props.modelValue[field.key] = val)"
+            />
+            <DictSelect
+              v-else-if="field.type === 'dict'"
+              :model-value="props.modelValue[field.key]"
+              :dict-code="field.dictCode!"
+              :placeholder="field.placeholder"
+              :disabled="props.disabled"
+              @update:model-value="val => (props.modelValue[field.key] = val)"
+            />
+          </ElFormItem>
+        </ElCol>
+
+        <ElCol
+          v-if="firstRowPlaceholderSpan > 0"
+          class="table-search-fields__col table-search-fields__placeholder-col"
+          :span="firstRowPlaceholderSpan"
+          aria-hidden="true"
+        />
+
+        <!-- 按钮区域 -->
+        <ElCol class="table-search-fields__col table-search-fields__action-col" :span="firstRowButtonSpan">
+          <ElFormItem class="table-search-fields__actions" label-width="0">
+            <ElButton
+              v-if="needsCollapse"
+              circle
+              :title="expanded ? '收起' : '展开'"
+              :aria-label="expanded ? '收起查询条件' : '展开查询条件'"
+              :disabled="props.disabled"
+              @click="handleToggle"
+            >
+              <icon-mdi-chevron-double-up v-if="expanded" />
+              <icon-mdi-chevron-double-down v-else />
+            </ElButton>
+            <ElButton :disabled="props.disabled" @click="handleReset">
+              <template #icon>
+                <icon-ic-round-refresh class="text-icon" />
+              </template>
+              重置
+            </ElButton>
+            <ElButton type="primary" :disabled="props.disabled" @click="handleSearch">
+              <template #icon>
+                <icon-ic-round-search class="text-icon" />
+              </template>
+              查询
+            </ElButton>
+          </ElFormItem>
+        </ElCol>
+      </ElRow>
+
+      <!-- 展开后的后续行 -->
+      <ElRow v-if="expanded && remainingFields.length > 0" :gutter="props.gutter">
+        <ElCol v-for="field in remainingFields" :key="field.key" class="table-search-fields__col" :span="fieldSpan">
+          <ElFormItem :label="field.label">
+            <ElInput
+              v-if="field.type === 'input'"
+              :model-value="props.modelValue[field.key]"
+              :placeholder="field.placeholder"
+              clearable
+              :disabled="props.disabled"
+              @update:model-value="val => (props.modelValue[field.key] = val)"
+            />
+            <ElSelect
+              v-else-if="field.type === 'select'"
+              :model-value="props.modelValue[field.key]"
+              :placeholder="field.placeholder"
+              clearable
+              :disabled="props.disabled"
+              @update:model-value="val => (props.modelValue[field.key] = val)"
+            >
+              <ElOption v-for="opt in field.options" :key="opt.value" :label="opt.label" :value="opt.value" />
+            </ElSelect>
+            <ElDatePicker
+              v-else-if="field.type === 'date'"
+              :model-value="props.modelValue[field.key]"
+              type="date"
+              :placeholder="field.placeholder"
+              clearable
+              :disabled="props.disabled"
+              value-format="YYYY-MM-DD"
+              @update:model-value="val => (props.modelValue[field.key] = val)"
+            />
+            <ElDatePicker
+              v-else-if="field.type === 'dateRange'"
+              :model-value="props.modelValue[field.key]"
+              type="daterange"
+              :placeholder="field.placeholder"
+              clearable
+              :disabled="props.disabled"
+              value-format="YYYY-MM-DD"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              @update:model-value="val => (props.modelValue[field.key] = val)"
+            />
+            <DictSelect
+              v-else-if="field.type === 'dict'"
+              :model-value="props.modelValue[field.key]"
+              :dict-code="field.dictCode!"
+              :placeholder="field.placeholder"
+              :disabled="props.disabled"
+              @update:model-value="val => (props.modelValue[field.key] = val)"
+            />
+          </ElFormItem>
+        </ElCol>
+      </ElRow>
+    </ElForm>
+  </ElCard>
+</template>
+
+<style scoped lang="scss">
+:deep(.el-form-item) {
+  display: flex;
+  align-items: center;
+}
+
+.table-search-fields__col {
+  min-width: 0;
+}
+
+.table-search-fields__placeholder-col {
+  pointer-events: none;
+}
+
+.table-search-fields__actions {
+  :deep(.el-form-item__content) {
+    display: flex;
+    flex-wrap: nowrap;
+    justify-content: flex-end;
+    gap: 8px;
+    min-width: 0;
+  }
+
+  :deep(.el-button + .el-button) {
+    margin-left: 0;
+  }
+}
+
+:deep(.el-form-item__content) {
+  min-width: 0;
+}
+
+:deep(.el-input),
+:deep(.el-select),
+:deep(.el-date-editor) {
+  width: 100%;
+  min-width: 0;
+}
+</style>

src/constants/dict.ts

@@ -59,3 +59,19 @@ export const RDMS_REQ_PRIORITY_DICT_CODE = 'rdms_req_priority';
  * 来源口径：产品需求文档中定义，标签包括工程需求、用户需求、安全需求、体验优化、功能需求
  */
 export const RDMS_REQ_CATEGORY_DICT_CODE = 'rdms_req_category';
+
+/**
+ * 项目类型字典编码
+ *
+ * 对应业务字段：项目相关接口和页面中的 projectType
+ * 来源口径：后端字典 rdms_project_type
+ */
+export const RDMS_PROJECT_TYPE_DICT_CODE = 'rdms_project_type';
+
+/**
+ * 项目执行类型字典编码
+ *
+ * 对应业务字段：项目任务管理中执行的 executionType
+ * 来源口径：`rdms-project-boot-执行任务接口API文档.md` 明确 executionType 来自字典 rdms_project_execution_type
+ */
+export const RDMS_PROJECT_EXECUTION_TYPE_DICT_CODE = 'rdms_project_execution_type';

src/constants/object-context.ts

@@ -10,11 +10,11 @@ export const objectContextDomainConfigs: App.ObjectContext.DomainConfig[] = [
     routePathPrefixes: ['/project'],
     entryRouteKey: 'project_list',
     entryRoutePath: '/project/list',
-    fallbackDefaultRouteKey: 'project_dashboard',
-    fallbackDefaultRoutePath: '/project/dashboard',
-    contextApiPath: `${WEB_SERVICE_PREFIX}/project/context`,
-    contextApiObjectIdParamKey: 'projectId',
-    contextApiObjectIdPlacement: 'query',
+    fallbackDefaultRouteKey: 'project_project_overview',
+    fallbackDefaultRoutePath: '/project/project/overview',
+    contextApiPath: `${WEB_SERVICE_PREFIX}/project/project/{id}/context`,
+    contextApiObjectIdParamKey: 'id',
+    contextApiObjectIdPlacement: 'path',
     objectIdQueryKey: OBJECT_CONTEXT_QUERY_KEY
   },
   {

src/constants/status-tag.ts

@@ -0,0 +1,59 @@
+/**
+ * 业务对象状态颜色（ElTag type）集中配置
+ *
+ * 各业务域的 statusCode → ElTag type 在此统一维护，避免散落在各业务模块。
+ * 未来若后端状态字典返回颜色字段，可在调用方优先取后端值，缺失时回退此映射。
+ */
+
+export type StatusTagType = 'primary' | 'success' | 'warning' | 'info' | 'danger';
+
+export type StatusDomain =
+  | 'projectExecution'
+  | 'projectTask'
+  | 'executionMember'
+  | 'project'
+  | 'product'
+  | 'requirement'
+  | 'workOrder';
+
+const statusTagTypeRegistry: Record<StatusDomain, Record<string, StatusTagType>> = {
+  // 项目-执行
+  projectExecution: {
+    pending: 'info',
+    active: 'primary',
+    paused: 'warning',
+    completed: 'success',
+    cancelled: 'danger'
+  },
+  // 项目-任务
+  projectTask: {
+    pending: 'info',
+    active: 'primary',
+    blocked: 'warning',
+    completed: 'success',
+    cancelled: 'danger'
+  },
+  // 执行成员变更事件
+  executionMember: {
+    join: 'success',
+    inactive: 'danger',
+    owner_transfer_in: 'warning',
+    owner_transfer_out: 'warning'
+  },
+  // 项目（待补全）
+  project: {},
+  // 产品（待补全）
+  product: {},
+  // 需求（待补全）
+  requirement: {},
+  // 工单（待补全）
+  workOrder: {}
+};
+
+export function getStatusTagType(domain: StatusDomain, statusCode: string | null | undefined): StatusTagType {
+  if (!statusCode) {
+    return 'info';
+  }
+
+  return statusTagTypeRegistry[domain][statusCode] || 'info';
+}

src/locales/langs/en-us.ts

@@ -169,12 +169,19 @@ const local: App.I18n.Schema = {
     function_request: 'Request',
     'function_toggle-auth': 'Toggle Auth',
     'function_super-page': 'Super Admin Visible',
-    product: 'Product Management',
+    product: 'Product',
     product_list: 'Product List',
-    product_dashboard: 'Product Dashboard',
-    product_requirement: 'Requirement Pool',
-    product_setting: 'Product Settings',
-    system: 'System Management',
+    product_dashboard: 'Dashboard',
+    product_requirement: 'Requirement',
+    product_setting: 'Settings',
+    project: 'Project',
+    project_list: 'Project List',
+    project_project: 'Project',
+    project_project_overview: 'Overview',
+    project_project_requirement: 'Requirement',
+    project_project_execution: 'Task Management',
+    project_project_setting: 'Settings',
+    system: 'System',
     system_user: 'User Management',
     'system_user-detail': 'User Detail',
     system_role: 'Role Management',

src/locales/langs/zh-cn.ts

@@ -174,6 +174,13 @@ const local: App.I18n.Schema = {
     product_dashboard: '产品仪表盘',
     product_requirement: '需求池',
     product_setting: '产品设置',
+    project: '项目管理',
+    project_list: '项目列表',
+    project_project: '项目详情',
+    project_project_overview: '项目概览',
+    project_project_requirement: '需求池',
+    project_project_execution: '任务管理',
+    project_project_setting: '项目设置',
     system: '系统管理',
     system_user: '用户管理',
     'system_user-detail': '用户详情',

src/router/elegant/imports.ts

@@ -51,6 +51,11 @@ export const views: Record<LastLevelRouteKey, RouteComponent | (() => Promise<Ro
   product_list: () => import("@/views/product/list/index.vue"),
   product_requirement: () => import("@/views/product/requirement/index.vue"),
   product_setting: () => import("@/views/product/setting/index.vue"),
+  project_list: () => import("@/views/project/list/index.vue"),
+  project_project_execution: () => import("@/views/project/project/execution/index.vue"),
+  project_project_overview: () => import("@/views/project/project/overview/index.vue"),
+  project_project_requirement: () => import("@/views/project/project/requirement/index.vue"),
+  project_project_setting: () => import("@/views/project/project/setting/index.vue"),
   system_dict: () => import("@/views/system/dict/index.vue"),
   system_menu: () => import("@/views/system/menu/index.vue"),
   system_post: () => import("@/views/system/post/index.vue"),

src/router/elegant/routes.ts

@@ -488,6 +488,87 @@ export const generatedRoutes: GeneratedRoute[] = [
       }
     ]
   },
+  {
+    name: 'project',
+    path: '/project',
+    component: 'layout.base',
+    meta: {
+      title: 'project',
+      i18nKey: 'route.project',
+      icon: 'mdi:briefcase-outline',
+      order: 5
+    },
+    children: [
+      {
+        name: 'project_list',
+        path: '/project/list',
+        component: 'view.project_list',
+        meta: {
+          title: 'project_list',
+          i18nKey: 'route.project_list',
+          icon: 'material-symbols:view-list-outline-rounded',
+          order: 1,
+          keepAlive: true
+        }
+      },
+      {
+        name: 'project_project',
+        path: '/project/project',
+        meta: {
+          title: 'project_project',
+          i18nKey: 'route.project_project',
+          hideInMenu: true,
+          activeMenu: 'project_list'
+        },
+        children: [
+          {
+            name: 'project_project_execution',
+            path: '/project/project/execution',
+            component: 'view.project_project_execution',
+            meta: {
+              title: 'project_project_execution',
+              i18nKey: 'route.project_project_execution',
+              hideInMenu: true,
+              activeMenu: 'project_list'
+            }
+          },
+          {
+            name: 'project_project_overview',
+            path: '/project/project/overview',
+            component: 'view.project_project_overview',
+            meta: {
+              title: 'project_project_overview',
+              i18nKey: 'route.project_project_overview',
+              hideInMenu: true,
+              activeMenu: 'project_list'
+            }
+          },
+          {
+            name: 'project_project_requirement',
+            path: '/project/project/requirement',
+            component: 'view.project_project_requirement',
+            meta: {
+              title: 'project_project_requirement',
+              i18nKey: 'route.project_project_requirement',
+              hideInMenu: true,
+              activeMenu: 'project_list'
+            }
+          },
+          {
+            name: 'project_project_setting',
+            path: '/project/project/setting',
+            component: 'view.project_project_setting',
+            meta: {
+              title: 'project_project_setting',
+              i18nKey: 'route.project_project_setting',
+              hideInMenu: true,
+              activeMenu: 'project_list'
+            }
+          }
+        ]
+      }
+    ]
+  },
   {
     name: 'system',
     path: '/system',

src/router/elegant/transform.ts

@@ -211,6 +211,13 @@ const routeMap: RouteMap = {
   "product_list": "/product/list",
   "product_requirement": "/product/requirement",
   "product_setting": "/product/setting",
+  "project": "/project",
+  "project_list": "/project/list",
+  "project_project": "/project/project",
+  "project_project_execution": "/project/project/execution",
+  "project_project_overview": "/project/project/overview",
+  "project_project_requirement": "/project/project/requirement",
+  "project_project_setting": "/project/project/setting",
   "system": "/system",
   "system_dict": "/system/dict",
   "system_menu": "/system/menu",

src/service/api/file.ts

@@ -0,0 +1,19 @@
+import { SYSTEM_SERVICE_PREFIX } from '@/constants/service';
+import { request } from '../request';
+
+const FILE_PREFIX = `${SYSTEM_SERVICE_PREFIX}/file`;
+
+/** 上传文件（模式一：后端中转） */
+export function uploadFile(file: File, directory?: string) {
+  const formData = new FormData();
+  formData.append('file', file);
+  if (directory) {
+    formData.append('directory', directory);
+  }
+
+  return request<string>({
+    url: `${FILE_PREFIX}/upload`,
+    method: 'post',
+    data: formData
+  });
+}

src/service/api/index.ts

@@ -1,6 +1,9 @@
 export * from './auth';
 export * from './dict';
+export * from './file';
 export * from './object-context';
 export * from './product';
+export * from './project';
+export * from './project-shared';
 export * from './route';
 export * from './system-manage';

src/service/api/object-context-normalize.ts

@@ -0,0 +1,199 @@
+import { normalizeNullableStringId, normalizeStringId } from './shared';
+
+export interface BackendObjectContextMenuDTO {
+  key?: string | null;
+  label?: string | null;
+  routeKey?: string | null;
+  routePath?: string | null;
+  id?: string | number | null;
+  name?: string | null;
+  path?: string | null;
+  icon?: string | null;
+  sort?: number | null;
+  children?: BackendObjectContextMenuDTO[] | null;
+}
+
+interface BackendProductContextProductDTO {
+  id?: string | number | null;
+  code?: string | null;
+  directionCode?: string | null;
+  name?: string | null;
+  managerUserId?: string | number | null;
+  statusCode?: string | null;
+}
+
+interface BackendProjectContextProjectDTO {
+  id?: string | number | null;
+  projectCode?: string | null;
+  projectName?: string | null;
+  projectType?: string | null;
+  productId?: string | number | null;
+  managerUserId?: string | number | null;
+  statusCode?: string | null;
+}
+
+interface BackendObjectContextRoleDTO {
+  roleId?: string | number | null;
+  roleCode?: string | null;
+  roleName?: string | null;
+  guestFlag?: boolean | null;
+}
+
+export interface BackendObjectContextDTO {
+  domainKey?: string | null;
+  objectType?: string | null;
+  objectId?: string | number | null;
+  objectName?: string | null;
+  objectSummary?: Record<string, unknown> | null;
+  menus?: BackendObjectContextMenuDTO[] | null;
+  contextScopedMenus?: BackendObjectContextMenuDTO[] | null;
+  buttonCodes?: string[] | null;
+  currentProduct?: BackendProductContextProductDTO | null;
+  currentProject?: BackendProjectContextProjectDTO | null;
+  currentRole?: BackendObjectContextRoleDTO | null;
+  navs?: BackendObjectContextMenuDTO[] | null;
+  buttons?: string[] | null;
+  defaultRouteKey?: string | null;
+  defaultRoutePath?: string | null;
+}
+
+function normalizeString(value: string | number | null | undefined) {
+  if (value === null || value === undefined) {
+    return '';
+  }
+
+  return String(value);
+}
+
+function normalizeRoutePath(path: string | null | undefined) {
+  const normalizedPath = normalizeString(path).trim();
+
+  if (!normalizedPath) {
+    return '';
+  }
+
+  if (normalizedPath.startsWith('/')) {
+    return normalizedPath;
+  }
+
+  return `/${normalizedPath}`;
+}
+
+function normalizeCurrentProduct(
+  product: BackendProductContextProductDTO
+): Record<'id' | 'code' | 'directionCode' | 'name' | 'managerUserId' | 'statusCode', string> {
+  return {
+    id: normalizeStringId(product.id || ''),
+    code: normalizeString(product.code),
+    directionCode: normalizeString(product.directionCode),
+    name: normalizeString(product.name),
+    managerUserId: normalizeNullableStringId(product.managerUserId) ?? '',
+    statusCode: normalizeString(product.statusCode)
+  };
+}
+
+function normalizeCurrentProject(project: BackendProjectContextProjectDTO) {
+  return {
+    id: normalizeStringId(project.id || ''),
+    projectCode: normalizeString(project.projectCode),
+    projectName: normalizeString(project.projectName),
+    projectType: normalizeString(project.projectType),
+    productId: normalizeNullableStringId(project.productId),
+    managerUserId: normalizeNullableStringId(project.managerUserId) ?? '',
+    statusCode: normalizeString(project.statusCode)
+  };
+}
+
+function normalizeCurrentRole(role: BackendObjectContextRoleDTO) {
+  return {
+    roleId: normalizeStringId(role.roleId || ''),
+    roleCode: normalizeString(role.roleCode),
+    roleName: normalizeString(role.roleName),
+    guestFlag: Boolean(role.guestFlag)
+  };
+}
+
+function normalizeMenu(menu: BackendObjectContextMenuDTO): App.ObjectContext.Menu {
+  const routeKey = normalizeString(menu.routeKey);
+  const routePath = normalizeRoutePath(menu.routePath || menu.path);
+  const key = normalizeString(menu.key || routeKey || routePath || menu.id);
+
+  return {
+    key,
+    label: normalizeString(menu.label || menu.name),
+    routeKey: routeKey || null,
+    routePath: routePath || null,
+    children: menu.children?.map(child => normalizeMenu(child)) || []
+  };
+}
+
+function getFirstNonEmptyMenuSource(data: BackendObjectContextDTO) {
+  const menuSources = [data.contextScopedMenus, data.menus, data.navs];
+
+  return menuSources.find(source => Array.isArray(source) && source.length > 0) || [];
+}
+
+function getFirstRoutableMenu(menus: App.ObjectContext.Menu[]): App.ObjectContext.Menu | null {
+  for (const menu of menus) {
+    if (menu.routeKey || menu.routePath) {
+      return menu;
+    }
+
+    const firstChildMenu = menu.children?.length ? getFirstRoutableMenu(menu.children) : null;
+
+    if (firstChildMenu) {
+      return firstChildMenu;
+    }
+  }
+
+  return null;
+}
+
+function normalizeObjectSummary(data: BackendObjectContextDTO): App.ObjectContext.Summary | null {
+  if (data.objectSummary) {
+    return data.objectSummary;
+  }
+
+  const summary: App.ObjectContext.Summary = {};
+
+  if (data.currentProduct) {
+    summary.currentProduct = normalizeCurrentProduct(data.currentProduct);
+  }
+
+  if (data.currentProject) {
+    summary.currentProject = normalizeCurrentProject(data.currentProject);
+  }
+
+  if (data.currentRole !== undefined) {
+    summary.currentRole = data.currentRole ? normalizeCurrentRole(data.currentRole) : null;
+  }
+
+  return Object.keys(summary).length ? summary : null;
+}
+
+// 待重构：拆 helper 以降低复杂度，暂以 disable 注释临时放行
+// eslint-disable-next-line complexity
+export function normalizeObjectContext(
+  config: App.ObjectContext.DomainConfig,
+  objectId: string,
+  data: BackendObjectContextDTO
+): Api.ObjectContext.ContextInfo {
+  const rawMenus = getFirstNonEmptyMenuSource(data);
+  const contextScopedMenus = rawMenus.map(menu => normalizeMenu(menu));
+  const firstRoutableMenu = getFirstRoutableMenu(contextScopedMenus);
+  const currentProduct = data.currentProduct ? normalizeCurrentProduct(data.currentProduct) : null;
+  const currentProject = data.currentProject ? normalizeCurrentProject(data.currentProject) : null;
+
+  return {
+    domainKey: (data.domainKey || config.domainKey) as App.ObjectContext.DomainKey,
+    objectType: (data.objectType || config.objectType) as App.ObjectContext.ObjectType,
+    objectId: normalizeString(data.objectId) || currentProduct?.id || currentProject?.id || objectId,
+    objectName: normalizeString(data.objectName || currentProduct?.name || currentProject?.projectName),
+    objectSummary: normalizeObjectSummary(data),
+    contextScopedMenus,
+    buttonCodes: data.buttonCodes ?? data.buttons ?? [],
+    defaultRouteKey: data.defaultRouteKey || firstRoutableMenu?.routeKey || '',
+    defaultRoutePath:
+      normalizeRoutePath(data.defaultRoutePath) || firstRoutableMenu?.routePath || config.fallbackDefaultRoutePath
+  };
+}

src/service/api/object-context.ts

@@ -1,145 +1,7 @@
 import type { LocationQueryValue } from 'vue-router';
 import { request } from '../request';
-import {
-  type ServiceRequestResult,
-  normalizeNullableStringId,
-  normalizeStringId,
-  safeJsonRequestConfig
-} from './shared';
-
-interface BackendObjectContextMenuDTO {
-  key?: string | null;
-  label?: string | null;
-  routeKey?: string | null;
-  routePath?: string | null;
-  id?: string | number | null;
-  name?: string | null;
-  path?: string | null;
-  children?: BackendObjectContextMenuDTO[] | null;
-}
-
-interface BackendProductContextProductDTO {
-  id?: string | number | null;
-  code?: string | null;
-  directionCode?: string | null;
-  name?: string | null;
-  managerUserId?: string | number | null;
-  statusCode?: string | null;
-}
-
-interface BackendProductContextRoleDTO {
-  roleId?: string | number | null;
-  roleCode?: string | null;
-  roleName?: string | null;
-}
-
-interface BackendObjectContextDTO {
-  domainKey?: string | null;
-  objectType?: string | null;
-  objectId?: string | number | null;
-  objectName?: string | null;
-  objectSummary?: Record<string, unknown> | null;
-  menus?: BackendObjectContextMenuDTO[] | null;
-  contextScopedMenus?: BackendObjectContextMenuDTO[] | null;
-  buttonCodes?: string[] | null;
-  currentProduct?: BackendProductContextProductDTO | null;
-  currentRole?: BackendProductContextRoleDTO | null;
-  navs?: BackendObjectContextMenuDTO[] | null;
-  buttons?: string[] | null;
-  defaultRouteKey?: string | null;
-  defaultRoutePath?: string | null;
-}
-
-function normalizeString(value: string | number | null | undefined) {
-  if (value === null || value === undefined) {
-    return '';
-  }
-
-  return String(value);
-}
-
-function normalizeRoutePath(path: string | null | undefined) {
-  const normalizedPath = normalizeString(path).trim();
-
-  if (!normalizedPath) {
-    return '';
-  }
-
-  if (normalizedPath.startsWith('/')) {
-    return normalizedPath;
-  }
-
-  return `/${normalizedPath}`;
-}
-
-function normalizeCurrentProduct(
-  product: BackendProductContextProductDTO
-): Record<'id' | 'code' | 'directionCode' | 'name' | 'managerUserId' | 'statusCode', string> {
-  return {
-    id: normalizeStringId(product.id || ''),
-    code: normalizeString(product.code),
-    directionCode: normalizeString(product.directionCode),
-    name: normalizeString(product.name),
-    managerUserId: normalizeNullableStringId(product.managerUserId) ?? '',
-    statusCode: normalizeString(product.statusCode)
-  };
-}
-
-function normalizeCurrentRole(role: BackendProductContextRoleDTO) {
-  return {
-    roleId: normalizeStringId(role.roleId || ''),
-    roleCode: normalizeString(role.roleCode),
-    roleName: normalizeString(role.roleName)
-  };
-}
-
-function normalizeMenu(menu: BackendObjectContextMenuDTO): App.ObjectContext.Menu {
-  const routeKey = normalizeString(menu.routeKey);
-  const routePath = normalizeRoutePath(menu.routePath || menu.path);
-  const key = normalizeString(menu.key || routeKey || routePath || menu.id);
-
-  return {
-    key,
-    label: normalizeString(menu.label || menu.name),
-    routeKey: routeKey || null,
-    routePath: routePath || null,
-    children: menu.children?.map(child => normalizeMenu(child)) || []
-  };
-}
-
-function getFirstRoutableMenu(menus: App.ObjectContext.Menu[]): App.ObjectContext.Menu | null {
-  for (const menu of menus) {
-    if (menu.routeKey || menu.routePath) {
-      return menu;
-    }
-
-    const firstChildMenu = menu.children?.length ? getFirstRoutableMenu(menu.children) : null;
-
-    if (firstChildMenu) {
-      return firstChildMenu;
-    }
-  }
-
-  return null;
-}
-
-function normalizeObjectSummary(data: BackendObjectContextDTO): App.ObjectContext.Summary | null {
-  if (data.objectSummary) {
-    return data.objectSummary;
-  }
-
-  const summary: App.ObjectContext.Summary = {};
-
-  if (data.currentProduct) {
-    summary.currentProduct = normalizeCurrentProduct(data.currentProduct);
-  }
-
-  if (data.currentRole !== undefined) {
-    summary.currentRole = data.currentRole ? normalizeCurrentRole(data.currentRole) : null;
-  }
-
-  return Object.keys(summary).length ? summary : null;
-}
+import { type ServiceRequestResult, safeJsonRequestConfig } from './shared';
+import { type BackendObjectContextDTO, normalizeObjectContext } from './object-context-normalize';
 
 function createContextApiUrl(config: App.ObjectContext.DomainConfig, objectId: string) {
   if (config.contextApiObjectIdPlacement !== 'path') {
@@ -151,30 +13,6 @@ function createContextApiUrl(config: App.ObjectContext.DomainConfig, objectId: s
   return config.contextApiPath.replace(placeholder, encodeURIComponent(objectId));
 }
 
-function normalizeObjectContext(
-  config: App.ObjectContext.DomainConfig,
-  objectId: string,
-  data: BackendObjectContextDTO
-): Api.ObjectContext.ContextInfo {
-  const rawMenus = data.contextScopedMenus ?? data.menus ?? data.navs ?? [];
-  const contextScopedMenus = rawMenus.map(menu => normalizeMenu(menu));
-  const firstRoutableMenu = getFirstRoutableMenu(contextScopedMenus);
-  const currentProduct = data.currentProduct ? normalizeCurrentProduct(data.currentProduct) : null;
-
-  return {
-    domainKey: (data.domainKey || config.domainKey) as App.ObjectContext.DomainKey,
-    objectType: (data.objectType || config.objectType) as App.ObjectContext.ObjectType,
-    objectId: normalizeString(data.objectId) || currentProduct?.id || objectId,
-    objectName: normalizeString(data.objectName || currentProduct?.name),
-    objectSummary: normalizeObjectSummary(data),
-    contextScopedMenus,
-    buttonCodes: data.buttonCodes ?? data.buttons ?? [],
-    defaultRouteKey: data.defaultRouteKey || firstRoutableMenu?.routeKey || '',
-    defaultRoutePath:
-      normalizeRoutePath(data.defaultRoutePath) || firstRoutableMenu?.routePath || config.fallbackDefaultRoutePath
-  };
-}
-
 export async function fetchGetObjectContext(
   config: App.ObjectContext.DomainConfig,
   objectId: string

src/service/api/product.ts

@@ -106,6 +106,15 @@ export async function fetchGetProductPage(params?: Api.Product.ProductSearchPara
   }));
 }
 
+/** 获取产品入口页概览统计 */
+export function fetchGetProductOverviewSummary() {
+  return request<Api.Product.ProductOverviewSummary>({
+    ...safeJsonRequestConfig,
+    url: `${PRODUCT_PREFIX}/overview-summary`,
+    method: 'get'
+  });
+}
+
 /** 鑾峰彇浜у搧璇︽儏 */
 export async function fetchGetProduct(id: string) {
   const result = await request<ProductResponse>({

src/service/api/project-shared.ts

@@ -0,0 +1,244 @@
+import { normalizeNullableStringId, normalizeStringId } from './shared';
+
+type ProjectStatusCode = Api.Project.ProjectStatusCode;
+type ProjectStatusActionCode = Exclude<Api.Project.ProjectStatusActionCode, 'auto_start'>;
+
+type StringIdResponse = string | number;
+
+export type ProjectLocalDateValue = string | number[] | null;
+
+export type LifecycleActionResponse<ActionCode extends string> = Partial<Api.Project.LifecycleAction<ActionCode>> & {
+  actionCode: ActionCode;
+};
+
+export type ProjectExecutionResponse = Omit<
+  Api.Project.ProjectExecution,
+  | 'id'
+  | 'projectId'
+  | 'projectRequirementId'
+  | 'ownerId'
+  | 'availableActions'
+  | 'plannedStartDate'
+  | 'plannedEndDate'
+  | 'actualStartDate'
+  | 'actualEndDate'
+  | 'progressRate'
+> & {
+  id: StringIdResponse;
+  projectId: StringIdResponse;
+  projectRequirementId?: StringIdResponse | null;
+  ownerId: StringIdResponse;
+  availableActions?: LifecycleActionResponse<Api.Project.ProjectExecutionActionCode>[] | null;
+  plannedStartDate?: ProjectLocalDateValue;
+  plannedEndDate?: ProjectLocalDateValue;
+  actualStartDate?: ProjectLocalDateValue;
+  actualEndDate?: ProjectLocalDateValue;
+  progressRate?: number | null;
+};
+
+export type ExecutionMemberResponse = Omit<Api.Project.ExecutionMember, 'id' | 'executionId' | 'userId'> & {
+  id: StringIdResponse;
+  executionId: StringIdResponse;
+  userId: StringIdResponse;
+};
+
+export type ExecutionMemberLogResponse = Omit<
+  Api.Project.ExecutionMemberLog,
+  'id' | 'executionId' | 'userId' | 'operatorUserId'
+> & {
+  id: StringIdResponse;
+  executionId: StringIdResponse;
+  userId: StringIdResponse;
+  operatorUserId: StringIdResponse;
+};
+
+export type ProjectTaskResponse = Omit<
+  Api.Project.ProjectTask,
+  | 'id'
+  | 'projectId'
+  | 'executionId'
+  | 'parentTaskId'
+  | 'ownerId'
+  | 'availableActions'
+  | 'plannedStartDate'
+  | 'plannedEndDate'
+  | 'actualStartDate'
+  | 'actualEndDate'
+  | 'progressRate'
+> & {
+  id: StringIdResponse;
+  projectId: StringIdResponse;
+  executionId: StringIdResponse;
+  parentTaskId?: StringIdResponse | null;
+  ownerId: StringIdResponse;
+  availableActions?: LifecycleActionResponse<Api.Project.ProjectTaskActionCode>[] | null;
+  plannedStartDate?: ProjectLocalDateValue;
+  plannedEndDate?: ProjectLocalDateValue;
+  actualStartDate?: ProjectLocalDateValue;
+  actualEndDate?: ProjectLocalDateValue;
+  progressRate?: number | null;
+};
+
+export interface ProjectMemberResponse {
+  id: string | number;
+  userId: string | number;
+  userNickname: string;
+  roleId: string | number;
+  roleName: string;
+  roleCode: string;
+  managerFlag: boolean;
+  status: 0 | 1;
+  joinedTime: string;
+  leftTime?: string | null;
+  remark?: string | null;
+}
+
+const projectLifecycleActionNameMap: Record<ProjectStatusActionCode, string> = {
+  pause: '暂停项目',
+  resume: '恢复项目',
+  complete: '完成项目',
+  cancel: '取消项目',
+  reopen: '重新开启',
+  archive: '归档项目'
+};
+
+const projectLifecycleActionReasonRequiredMap: Record<ProjectStatusActionCode, boolean> = {
+  pause: true,
+  resume: false,
+  complete: true,
+  cancel: true,
+  reopen: true,
+  archive: false
+};
+
+const projectLifecycleActionMap: Record<ProjectStatusCode, ProjectStatusActionCode[]> = {
+  pending: ['cancel'],
+  active: ['pause', 'complete', 'cancel'],
+  paused: ['resume', 'cancel'],
+  completed: ['reopen', 'archive'],
+  cancelled: [],
+  archived: []
+};
+
+export function getProjectLifecycleActions(statusCode: ProjectStatusCode): Api.Project.ProjectLifecycleAction[] {
+  return projectLifecycleActionMap[statusCode].map(actionCode => ({
+    actionCode,
+    actionName: projectLifecycleActionNameMap[actionCode],
+    needReason: projectLifecycleActionReasonRequiredMap[actionCode]
+  }));
+}
+
+export function normalizeProjectLocalDate(value: ProjectLocalDateValue | undefined) {
+  if (value === null || value === undefined || value === '') {
+    return null;
+  }
+
+  if (Array.isArray(value)) {
+    const [year, month, day] = value;
+
+    if (!year || !month || !day) {
+      return null;
+    }
+
+    return [year, month, day].map(item => String(item).padStart(2, '0')).join('-');
+  }
+
+  return String(value);
+}
+
+export function normalizeLifecycleActions<ActionCode extends string>(
+  actions: LifecycleActionResponse<ActionCode>[] | null | undefined
+): Api.Project.LifecycleAction<ActionCode>[] {
+  return (actions ?? []).map(action => ({
+    actionCode: action.actionCode,
+    actionName: action.actionName ?? '',
+    needReason: Boolean(action.needReason)
+  }));
+}
+
+export function normalizeProjectMember(response: ProjectMemberResponse): Api.Project.ProjectMember {
+  return {
+    id: normalizeStringId(response.id),
+    userId: normalizeStringId(response.userId),
+    userNickname: response.userNickname || '',
+    roleId: normalizeStringId(response.roleId),
+    roleName: response.roleName || '',
+    roleCode: response.roleCode || '',
+    managerFlag: Boolean(response.managerFlag),
+    status: response.status,
+    joinedTime: response.joinedTime,
+    leftTime: response.leftTime ?? null,
+    remark: response.remark ?? null
+  };
+}
+
+export function normalizeProjectExecution(response: ProjectExecutionResponse): Api.Project.ProjectExecution {
+  return {
+    ...response,
+    id: normalizeStringId(response.id),
+    projectId: normalizeStringId(response.projectId),
+    projectRequirementId: normalizeNullableStringId(response.projectRequirementId),
+    ownerId: normalizeStringId(response.ownerId),
+    ownerNickname: response.ownerNickname ?? null,
+    statusName: response.statusName ?? null,
+    terminal: Boolean(response.terminal),
+    allowEdit: Boolean(response.allowEdit),
+    availableActions: normalizeLifecycleActions(response.availableActions),
+    plannedStartDate: normalizeProjectLocalDate(response.plannedStartDate),
+    plannedEndDate: normalizeProjectLocalDate(response.plannedEndDate),
+    actualStartDate: normalizeProjectLocalDate(response.actualStartDate),
+    actualEndDate: normalizeProjectLocalDate(response.actualEndDate),
+    progressRate: typeof response.progressRate === 'number' ? response.progressRate : 0,
+    executionDesc: response.executionDesc ?? null,
+    lastStatusReason: response.lastStatusReason ?? null
+  };
+}
+
+export function normalizeExecutionMember(response: ExecutionMemberResponse): Api.Project.ExecutionMember {
+  return {
+    ...response,
+    id: normalizeStringId(response.id),
+    executionId: normalizeStringId(response.executionId),
+    userId: normalizeStringId(response.userId),
+    userNickname: response.userNickname ?? null,
+    joinedAt: response.joinedAt ?? null,
+    removedAt: response.removedAt ?? null,
+    removedReason: response.removedReason ?? null
+  };
+}
+
+export function normalizeExecutionMemberLog(response: ExecutionMemberLogResponse): Api.Project.ExecutionMemberLog {
+  return {
+    ...response,
+    id: normalizeStringId(response.id),
+    executionId: normalizeStringId(response.executionId),
+    userId: normalizeStringId(response.userId),
+    operatorUserId: normalizeStringId(response.operatorUserId),
+    userNicknameSnapshot: response.userNicknameSnapshot ?? null,
+    operatorNicknameSnapshot: response.operatorNicknameSnapshot ?? null,
+    reason: response.reason ?? null
+  };
+}
+
+export function normalizeProjectTask(response: ProjectTaskResponse): Api.Project.ProjectTask {
+  return {
+    ...response,
+    id: normalizeStringId(response.id),
+    projectId: normalizeStringId(response.projectId),
+    executionId: normalizeStringId(response.executionId),
+    parentTaskId: normalizeNullableStringId(response.parentTaskId),
+    ownerId: normalizeStringId(response.ownerId),
+    ownerNickname: response.ownerNickname ?? null,
+    statusName: response.statusName ?? null,
+    terminal: Boolean(response.terminal),
+    allowEdit: Boolean(response.allowEdit),
+    availableActions: normalizeLifecycleActions(response.availableActions),
+    progressRate: typeof response.progressRate === 'number' ? response.progressRate : 0,
+    plannedStartDate: normalizeProjectLocalDate(response.plannedStartDate),
+    plannedEndDate: normalizeProjectLocalDate(response.plannedEndDate),
+    actualStartDate: normalizeProjectLocalDate(response.actualStartDate),
+    actualEndDate: normalizeProjectLocalDate(response.actualEndDate),
+    taskDesc: response.taskDesc ?? null,
+    lastStatusReason: response.lastStatusReason ?? null
+  };
+}

src/service/api/project.ts

@@ -0,0 +1,532 @@
+import { WEB_SERVICE_PREFIX } from '@/constants/service';
+import { request } from '../request';
+import {
+  type ServiceRequestResult,
+  mapServiceResult,
+  normalizeNullableStringId,
+  normalizeStringId,
+  safeJsonRequestConfig
+} from './shared';
+import {
+  type ExecutionMemberLogResponse,
+  type ExecutionMemberResponse,
+  type ProjectExecutionResponse,
+  type ProjectLocalDateValue,
+  type ProjectMemberResponse,
+  type ProjectTaskResponse,
+  getProjectLifecycleActions,
+  normalizeExecutionMember,
+  normalizeExecutionMemberLog,
+  normalizeProjectExecution,
+  normalizeProjectLocalDate,
+  normalizeProjectMember,
+  normalizeProjectTask
+} from './project-shared';
+
+const PROJECT_PREFIX = `${WEB_SERVICE_PREFIX}/project/project`;
+
+type ProjectResponse = Omit<
+  Api.Project.Project,
+  'id' | 'managerUserId' | 'productId' | 'plannedStartDate' | 'plannedEndDate' | 'actualStartDate' | 'actualEndDate'
+> & {
+  id: string | number;
+  managerUserId?: string | number | null;
+  productId?: string | number | null;
+  plannedStartDate?: ProjectLocalDateValue;
+  plannedEndDate?: ProjectLocalDateValue;
+  actualStartDate?: ProjectLocalDateValue;
+  actualEndDate?: ProjectLocalDateValue;
+};
+
+type ProjectPageResponse = Api.Project.PageResult<ProjectResponse>;
+type ProjectExecutionPageResponse = Api.Project.PageResult<ProjectExecutionResponse>;
+type ProjectTaskPageResponse = Api.Project.PageResult<ProjectTaskResponse>;
+type StatusBoardResponse = Api.Project.StatusBoard;
+
+type ProjectContextResponse = Omit<Api.Project.ProjectContext, 'currentProject' | 'navs'> & {
+  currentProject: Omit<Api.Project.ProjectContext['currentProject'], 'id'> & { id: string | number };
+  navs: Array<Omit<Api.Project.ProjectContext['navs'][number], 'id'> & { id: string | number }>;
+};
+
+function getExecutionPrefix(projectId: string) {
+  return `${PROJECT_PREFIX}/${projectId}/executions`;
+}
+
+function getTaskPrefix(projectId: string, executionId: string) {
+  return `${getExecutionPrefix(projectId)}/${executionId}/tasks`;
+}
+
+/** 归一化项目数据 */
+function normalizeProject(project: ProjectResponse): Api.Project.Project {
+  return {
+    ...project,
+    id: normalizeStringId(project.id),
+    managerUserId: normalizeNullableStringId(project.managerUserId) ?? '',
+    productId: normalizeNullableStringId(project.productId),
+    plannedStartDate: normalizeProjectLocalDate(project.plannedStartDate),
+    plannedEndDate: normalizeProjectLocalDate(project.plannedEndDate),
+    actualStartDate: normalizeProjectLocalDate(project.actualStartDate),
+    actualEndDate: normalizeProjectLocalDate(project.actualEndDate)
+  };
+}
+
+/** 将项目详情组装为设置页数据 */
+function createProjectSettings(project: Api.Project.Project): Api.Project.ProjectSettings {
+  return {
+    baseInfo: {
+      id: project.id,
+      projectCode: project.projectCode,
+      projectName: project.projectName,
+      directionCode: project.directionCode,
+      projectType: project.projectType,
+      productId: project.productId,
+      productName: project.productName ?? null,
+      managerUserId: project.managerUserId,
+      managerUserNickname: project.managerUserNickname ?? null,
+      statusCode: project.statusCode,
+      plannedStartDate: project.plannedStartDate,
+      plannedEndDate: project.plannedEndDate,
+      actualStartDate: project.actualStartDate,
+      actualEndDate: project.actualEndDate,
+      projectDesc: project.projectDesc,
+      lastStatusReason: project.lastStatusReason
+    },
+    lifecycle: {
+      statusCode: project.statusCode,
+      lastStatusReason: project.lastStatusReason,
+      availableActions: getProjectLifecycleActions(project.statusCode)
+    }
+  };
+}
+
+/** 获取项目分页 */
+export async function fetchGetProjectPage(params?: Api.Project.ProjectSearchParams) {
+  const result = await request<ProjectPageResponse>({
+    ...safeJsonRequestConfig,
+    url: `${PROJECT_PREFIX}/page`,
+    method: 'get',
+    params
+  });
+
+  return mapServiceResult(result as ServiceRequestResult<ProjectPageResponse>, data => ({
+    ...data,
+    list: data.list.map(normalizeProject)
+  }));
+}
+
+/** 获取项目入口页概览统计 */
+export function fetchGetProjectOverviewSummary() {
+  return request<Api.Project.ProjectOverviewSummary>({
+    ...safeJsonRequestConfig,
+    url: `${PROJECT_PREFIX}/overview-summary`,
+    method: 'get'
+  });
+}
+
+/** 获取项目详情 */
+export async function fetchGetProject(id: string) {
+  const result = await request<ProjectResponse>({
+    ...safeJsonRequestConfig,
+    url: `${PROJECT_PREFIX}/get`,
+    method: 'get',
+    params: { id }
+  });
+
+  return mapServiceResult(result as ServiceRequestResult<ProjectResponse>, normalizeProject);
+}
+
+/** 创建项目 */
+export async function fetchCreateProject(data: Api.Project.SaveProjectParams) {
+  const result = await request<string | number>({
+    ...safeJsonRequestConfig,
+    url: `${PROJECT_PREFIX}/create`,
+    method: 'post',
+    data
+  });
+
+  return mapServiceResult(result as ServiceRequestResult<string | number>, normalizeStringId);
+}
+
+/** 更新项目 */
+export function fetchUpdateProject(data: Api.Project.UpdateProjectParams) {
+  return request<boolean>({
+    url: `${PROJECT_PREFIX}/update`,
+    method: 'put',
+    data
+  });
+}
+
+/** 变更项目状态 */
+export function fetchChangeProjectStatus(data: Api.Project.ChangeProjectStatusParams) {
+  return request<boolean>({
+    url: `${PROJECT_PREFIX}/change-status`,
+    method: 'post',
+    data
+  });
+}
+
+/** 删除项目 */
+export function fetchDeleteProject(data: Api.Project.DeleteProjectParams) {
+  return request<boolean>({
+    url: `${PROJECT_PREFIX}/delete`,
+    method: 'post',
+    data
+  });
+}
+
+/** 获取项目上下文 */
+export async function fetchGetProjectContext(id: string) {
+  const result = await request<ProjectContextResponse>({
+    ...safeJsonRequestConfig,
+    url: `${PROJECT_PREFIX}/${id}/context`,
+    method: 'get'
+  });
+
+  return mapServiceResult(result as ServiceRequestResult<ProjectContextResponse>, data => ({
+    ...data,
+    currentProject: {
+      ...data.currentProject,
+      id: normalizeStringId(data.currentProject.id)
+    },
+    navs: data.navs.map(nav => ({
+      ...nav,
+      id: normalizeStringId(nav.id)
+    }))
+  }));
+}
+
+/** 获取项目成员列表 */
+export async function fetchGetProjectMembers(id: string) {
+  const result = await request<ProjectMemberResponse[]>({
+    ...safeJsonRequestConfig,
+    url: `${PROJECT_PREFIX}/${id}/members`,
+    method: 'get'
+  });
+
+  return mapServiceResult(result as ServiceRequestResult<ProjectMemberResponse[]>, data =>
+    data.map(normalizeProjectMember)
+  );
+}
+
+/** 创建项目成员 */
+export async function fetchCreateProjectMember(id: string, data: Api.Project.CreateProjectMemberParams) {
+  const result = await request<string | number>({
+    ...safeJsonRequestConfig,
+    url: `${PROJECT_PREFIX}/${id}/members`,
+    method: 'post',
+    data
+  });
+
+  return mapServiceResult(result as ServiceRequestResult<string | number>, normalizeStringId);
+}
+
+/** 更新项目成员 */
+export function fetchUpdateProjectMember(id: string, memberId: string, data: Api.Project.UpdateProjectMemberParams) {
+  return request<boolean>({
+    ...safeJsonRequestConfig,
+    url: `${PROJECT_PREFIX}/${id}/members/${memberId}`,
+    method: 'put',
+    data
+  });
+}
+
+/** 移出项目成员 */
+export function fetchInactiveProjectMember(
+  id: string,
+  memberId: string,
+  data: Api.Project.InactiveProjectMemberParams
+) {
+  return request<boolean>({
+    ...safeJsonRequestConfig,
+    url: `${PROJECT_PREFIX}/${id}/members/${memberId}/inactive`,
+    method: 'post',
+    data
+  });
+}
+
+/** 获取项目设置 */
+export async function fetchGetProjectSettings(id: string) {
+  const result = await fetchGetProject(id);
+
+  if (result.error || !result.data) {
+    return result as ServiceRequestResult<Api.Project.ProjectSettings>;
+  }
+
+  return {
+    ...result,
+    data: createProjectSettings(result.data)
+  };
+}
+
+/** 更新项目设置基础信息 */
+export async function fetchUpdateProjectSettingBaseInfo(
+  id: string,
+  data: Api.Project.UpdateProjectSettingBaseInfoParams
+) {
+  const detailResult = await fetchGetProject(id);
+
+  if (detailResult.error || !detailResult.data) {
+    return detailResult as ServiceRequestResult<boolean>;
+  }
+
+  return fetchUpdateProject({
+    id,
+    projectCode: detailResult.data.projectCode,
+    projectName: data.projectName,
+    directionCode: data.directionCode,
+    projectType: data.projectType,
+    productId: detailResult.data.productId,
+    managerUserId: detailResult.data.managerUserId,
+    plannedStartDate: data.plannedStartDate,
+    plannedEndDate: data.plannedEndDate,
+    actualStartDate: detailResult.data.actualStartDate,
+    actualEndDate: detailResult.data.actualEndDate,
+    projectDesc: data.projectDesc
+  });
+}
+
+/** 获取项目执行分页 */
+export async function fetchGetProjectExecutionPage(
+  projectId: string,
+  params?: Api.Project.ProjectExecutionSearchParams
+) {
+  const result = await request<ProjectExecutionPageResponse>({
+    ...safeJsonRequestConfig,
+    url: `${getExecutionPrefix(projectId)}/page`,
+    method: 'get',
+    params
+  });
+
+  return mapServiceResult(result as ServiceRequestResult<ProjectExecutionPageResponse>, data => ({
+    ...data,
+    list: data.list.map(normalizeProjectExecution)
+  }));
+}
+
+/** 获取项目执行状态看板 */
+export function fetchGetProjectExecutionStatusBoard(
+  projectId: string,
+  params?: Api.Project.ProjectExecutionStatusBoardParams
+) {
+  return request<StatusBoardResponse>({
+    ...safeJsonRequestConfig,
+    url: `${getExecutionPrefix(projectId)}/status-board`,
+    method: 'get',
+    params
+  });
+}
+
+/** 获取项目执行详情 */
+export async function fetchGetProjectExecution(projectId: string, executionId: string) {
+  const result = await request<ProjectExecutionResponse>({
+    ...safeJsonRequestConfig,
+    url: `${getExecutionPrefix(projectId)}/${executionId}`,
+    method: 'get'
+  });
+
+  return mapServiceResult(result as ServiceRequestResult<ProjectExecutionResponse>, normalizeProjectExecution);
+}
+
+/** 创建项目执行 */
+export async function fetchCreateProjectExecution(projectId: string, data: Api.Project.SaveProjectExecutionParams) {
+  const result = await request<string | number>({
+    ...safeJsonRequestConfig,
+    url: getExecutionPrefix(projectId),
+    method: 'post',
+    data
+  });
+
+  return mapServiceResult(result as ServiceRequestResult<string | number>, normalizeStringId);
+}
+
+/** 更新项目执行 */
+export function fetchUpdateProjectExecution(
+  projectId: string,
+  executionId: string,
+  data: Api.Project.SaveProjectExecutionParams
+) {
+  return request<boolean>({
+    ...safeJsonRequestConfig,
+    url: `${getExecutionPrefix(projectId)}/${executionId}`,
+    method: 'put',
+    data
+  });
+}
+
+/** 变更项目执行负责人 */
+export function fetchChangeProjectExecutionOwner(
+  projectId: string,
+  executionId: string,
+  data: Api.Project.ChangeExecutionOwnerParams
+) {
+  return request<boolean>({
+    ...safeJsonRequestConfig,
+    url: `${getExecutionPrefix(projectId)}/${executionId}/change-owner`,
+    method: 'post',
+    data
+  });
+}
+
+/** 变更项目执行状态 */
+export function fetchChangeProjectExecutionStatus(
+  projectId: string,
+  executionId: string,
+  data: Api.Project.ChangeExecutionStatusParams
+) {
+  return request<boolean>({
+    ...safeJsonRequestConfig,
+    url: `${getExecutionPrefix(projectId)}/${executionId}/change-status`,
+    method: 'post',
+    data
+  });
+}
+
+/** 获取项目执行成员 */
+export async function fetchGetProjectExecutionMembers(projectId: string, executionId: string) {
+  const result = await request<ExecutionMemberResponse[]>({
+    ...safeJsonRequestConfig,
+    url: `${getExecutionPrefix(projectId)}/${executionId}/members`,
+    method: 'get'
+  });
+
+  return mapServiceResult(result as ServiceRequestResult<ExecutionMemberResponse[]>, data =>
+    data.map(normalizeExecutionMember)
+  );
+}
+
+/** 创建项目执行成员 */
+export async function fetchCreateProjectExecutionMember(
+  projectId: string,
+  executionId: string,
+  data: Api.Project.CreateExecutionMemberParams
+) {
+  const result = await request<string | number>({
+    ...safeJsonRequestConfig,
+    url: `${getExecutionPrefix(projectId)}/${executionId}/members`,
+    method: 'post',
+    data
+  });
+
+  return mapServiceResult(result as ServiceRequestResult<string | number>, normalizeStringId);
+}
+
+/** 移除项目执行成员 */
+export function fetchInactiveProjectExecutionMember(
+  projectId: string,
+  executionId: string,
+  payload: { memberId: string; data: Api.Project.InactiveExecutionMemberParams }
+) {
+  return request<boolean>({
+    ...safeJsonRequestConfig,
+    url: `${getExecutionPrefix(projectId)}/${executionId}/members/${payload.memberId}/inactive`,
+    method: 'post',
+    data: payload.data
+  });
+}
+
+/** 获取项目执行成员变更历史分页 */
+export async function fetchGetProjectExecutionMemberLogPage(
+  projectId: string,
+  executionId: string,
+  params?: Api.Project.ExecutionMemberLogSearchParams
+) {
+  const result = await request<Api.Project.PageResult<ExecutionMemberLogResponse>>({
+    ...safeJsonRequestConfig,
+    url: `${getExecutionPrefix(projectId)}/${executionId}/member-logs`,
+    method: 'get',
+    params
+  });
+
+  return mapServiceResult(result as ServiceRequestResult<Api.Project.PageResult<ExecutionMemberLogResponse>>, data => ({
+    ...data,
+    list: data.list.map(normalizeExecutionMemberLog)
+  }));
+}
+
+/** 获取项目任务分页 */
+export async function fetchGetProjectTaskPage(
+  projectId: string,
+  executionId: string,
+  params?: Api.Project.ProjectTaskSearchParams
+) {
+  const result = await request<ProjectTaskPageResponse>({
+    ...safeJsonRequestConfig,
+    url: `${getTaskPrefix(projectId, executionId)}/page`,
+    method: 'get',
+    params
+  });
+
+  return mapServiceResult(result as ServiceRequestResult<ProjectTaskPageResponse>, data => ({
+    ...data,
+    list: data.list.map(normalizeProjectTask)
+  }));
+}
+
+/** 获取项目任务状态看板 */
+export function fetchGetProjectTaskStatusBoard(
+  projectId: string,
+  executionId: string,
+  params?: Api.Project.ProjectTaskStatusBoardParams
+) {
+  return request<StatusBoardResponse>({
+    ...safeJsonRequestConfig,
+    url: `${getTaskPrefix(projectId, executionId)}/status-board`,
+    method: 'get',
+    params
+  });
+}
+
+/** 获取项目任务详情 */
+export async function fetchGetProjectTask(projectId: string, executionId: string, taskId: string) {
+  const result = await request<ProjectTaskResponse>({
+    ...safeJsonRequestConfig,
+    url: `${getTaskPrefix(projectId, executionId)}/${taskId}`,
+    method: 'get'
+  });
+
+  return mapServiceResult(result as ServiceRequestResult<ProjectTaskResponse>, normalizeProjectTask);
+}
+
+/** 创建项目任务 */
+export async function fetchCreateProjectTask(
+  projectId: string,
+  executionId: string,
+  data: Api.Project.SaveProjectTaskParams
+) {
+  const result = await request<string | number>({
+    ...safeJsonRequestConfig,
+    url: getTaskPrefix(projectId, executionId),
+    method: 'post',
+    data
+  });
+
+  return mapServiceResult(result as ServiceRequestResult<string | number>, normalizeStringId);
+}
+
+/** 更新项目任务 */
+export function fetchUpdateProjectTask(
+  projectId: string,
+  executionId: string,
+  payload: { taskId: string; data: Api.Project.SaveProjectTaskParams }
+) {
+  return request<boolean>({
+    ...safeJsonRequestConfig,
+    url: `${getTaskPrefix(projectId, executionId)}/${payload.taskId}`,
+    method: 'put',
+    data: payload.data
+  });
+}
+
+/** 变更项目任务状态 */
+export function fetchChangeProjectTaskStatus(
+  projectId: string,
+  executionId: string,
+  payload: { taskId: string; data: Api.Project.ChangeTaskStatusParams }
+) {
+  return request<boolean>({
+    ...safeJsonRequestConfig,
+    url: `${getTaskPrefix(projectId, executionId)}/${payload.taskId}/change-status`,
+    method: 'post',
+    data: payload.data
+  });
+}

src/service/api/route.ts

@@ -95,31 +95,78 @@ function replaceWithStaticObjectContextDomainRoute(routes: Api.Route.MenuRoute[]
       return;
     }
 
-    const wrappedDomainRoute = cloneStaticRouteAsMenuRoute(staticDomainRoute, `object-context:${config.domainKey}`);
-    const entryRouteIndex = normalizedRoutes.findIndex(route => route.id === entryRoute.id);
-    const domainRouteIds = new Set(domainTopLevelRoutes.map(route => route.id));
+    // Create a map of backend routes by name for quick lookup
+    const backendRouteMap = new Map<string, Api.Route.MenuRoute>();
+    domainTopLevelRoutes.forEach(route => {
+      if (route.name) {
+        backendRouteMap.set(String(route.name), route);
+      }
+    });
 
-    if (entryRoute.meta) {
-      const nextMeta: RouteMeta = {
-        title: wrappedDomainRoute.meta?.title || config.domainKey,
-        ...(wrappedDomainRoute.meta || {})
+    // Clone static route but preserve backend route's meta for children
+    // 待重构：拆 helper 以降低复杂度，暂以 disable 注释临时放行
+    // eslint-disable-next-line complexity
+    function cloneStaticRoutePreservingBackendMeta(route: ElegantConstRoute, idPrefix: string): Api.Route.MenuRoute {
+      const backendRoute = route.name ? backendRouteMap.get(String(route.name)) : undefined;
+      const { children: _children, ...routeWithoutChildren } = route;
+      const baseRoute: Api.Route.MenuRoute = {
+        ...routeWithoutChildren,
+        id: `${idPrefix}:${String(route.name || route.path)}`
       };
 
-      if (entryRoute.meta.icon) {
-        nextMeta.icon = entryRoute.meta.icon;
+      // If there's a backend route, preserve its meta
+      if (backendRoute?.meta) {
+        baseRoute.meta = {
+          ...baseRoute.meta,
+          title: backendRoute.meta.title || baseRoute.meta?.title || String(route.name || route.path),
+          icon: backendRoute.meta.icon || baseRoute.meta?.icon,
+          localIcon: backendRoute.meta.localIcon || baseRoute.meta?.localIcon,
+          order:
+            backendRoute.meta.order !== undefined && backendRoute.meta.order !== null
+              ? backendRoute.meta.order
+              : baseRoute.meta?.order,
+          keepAlive:
+            backendRoute.meta.keepAlive !== undefined && backendRoute.meta.keepAlive !== null
+              ? backendRoute.meta.keepAlive
+              : baseRoute.meta?.keepAlive,
+          i18nKey: backendRoute.meta.i18nKey || baseRoute.meta?.i18nKey
+        };
       }
 
-      if (entryRoute.meta.localIcon) {
-        nextMeta.localIcon = entryRoute.meta.localIcon;
+      // Recursively process children
+      if (route.children?.length) {
+        baseRoute.children = route.children.map(child => cloneStaticRoutePreservingBackendMeta(child, idPrefix));
       }
 
-      if (entryRoute.meta.order !== undefined) {
-        nextMeta.order = entryRoute.meta.order;
-      }
-
-      wrappedDomainRoute.meta = nextMeta;
+      return baseRoute;
     }
 
+    const wrappedDomainRoute = cloneStaticRoutePreservingBackendMeta(
+      staticDomainRoute,
+      `object-context:${config.domainKey}`
+    );
+
+    // Merge entry route's meta to domain route
+    if (entryRoute.meta) {
+      wrappedDomainRoute.meta = {
+        ...wrappedDomainRoute.meta,
+        title: entryRoute.meta.title || wrappedDomainRoute.meta?.title || config.domainKey,
+        icon: entryRoute.meta.icon || wrappedDomainRoute.meta?.icon,
+        localIcon: entryRoute.meta.localIcon || wrappedDomainRoute.meta?.localIcon,
+        order:
+          entryRoute.meta.order !== undefined && entryRoute.meta.order !== null
+            ? entryRoute.meta.order
+            : wrappedDomainRoute.meta?.order,
+        keepAlive:
+          entryRoute.meta.keepAlive !== undefined && entryRoute.meta.keepAlive !== null
+            ? entryRoute.meta.keepAlive
+            : wrappedDomainRoute.meta?.keepAlive
+      };
+    }
+
+    const entryRouteIndex = normalizedRoutes.findIndex(route => route.id === entryRoute.id);
+    const domainRouteIds = new Set(domainTopLevelRoutes.map(route => route.id));
+
     normalizedRoutes = normalizedRoutes.filter(route => !domainRouteIds.has(route.id));
     normalizedRoutes.splice(entryRouteIndex < 0 ? normalizedRoutes.length : entryRouteIndex, 0, wrappedDomainRoute);
   });

src/service/api/system-manage.ts

@@ -74,6 +74,7 @@ function createBatchDeleteQuery(ids: Array<string | number>) {
 
 type UserSimpleResponse = Omit<Api.SystemManage.UserSimple, 'id'> & {
   id: string | number;
+  deptId?: string | number | null;
 };
 
 type RoleResponse = Omit<Api.SystemManage.Role, 'id'> & {
@@ -120,7 +121,8 @@ type UserManagementRelationTreeResponse = Omit<
 function normalizeUserSimple(user: UserSimpleResponse): Api.SystemManage.UserSimple {
   return {
     ...user,
-    id: normalizeStringId(user.id)
+    id: normalizeStringId(user.id),
+    deptId: normalizeNullableStringId(user.deptId)
   };
 }
 

src/store/modules/route/shared.ts

@@ -153,7 +153,12 @@ export function getCacheRouteNames(routes: RouteRecordRaw[]) {
   const cacheNames: LastLevelRouteKey[] = [];
 
   routes.forEach(route => {
-    // only get last two level route, which has component
+    // Check first-level routes (routes with component but no children)
+    if (route.component && route.meta?.keepAlive && !route.children?.length) {
+      cacheNames.push(route.name as LastLevelRouteKey);
+    }
+
+    // Check second-level routes
     route.children?.forEach(child => {
       if (child.component && child.meta?.keepAlive) {
         cacheNames.push(child.name as LastLevelRouteKey);

src/styles/scss/element-plus.scss

@@ -428,6 +428,18 @@ html .el-collapse {
   margin-left: 0 !important;
 }
 
+.business-table-card-body {
+  display: flex;
+  height: calc(100% - 56px);
+  min-height: 0;
+  flex: 1;
+  flex-direction: column;
+
+  > .flex-1 {
+    min-height: 0;
+  }
+}
+
 .el-card {
   display: flex;
   flex-direction: column;
@@ -484,3 +496,44 @@ html .el-collapse {
     border-radius: $radius;
   }
 }
+
+.el-message {
+  min-width: 280px;
+  padding: 12px 18px;
+  border: none;
+  border-radius: $radius;
+  box-shadow: 0 6px 16px rgb(0 0 0 / 15%);
+
+  .el-message__content {
+    color: #fff;
+    font-weight: 500;
+  }
+
+  .el-icon {
+    color: #fff;
+  }
+
+  .el-message__closeBtn {
+    color: rgb(255 255 255 / 80%);
+  }
+
+  .el-message__closeBtn:hover {
+    color: #fff;
+  }
+
+  &--success {
+    background-color: var(--el-color-success);
+  }
+
+  &--info {
+    background-color: var(--el-color-info);
+  }
+
+  &--warning {
+    background-color: var(--el-color-warning);
+  }
+
+  &--error {
+    background-color: var(--el-color-danger);
+  }
+}

src/typings/api/product.d.ts

@@ -21,6 +21,12 @@ declare namespace Api {
       list: T[];
     }
 
+    /** 产品入口页概览统计 */
+    interface ProductOverviewSummary {
+      /** 产品状态数量映射，key 为后端状态编码 */
+      statusCounts: Record<string, number>;
+    }
+
     interface Product {
       /** 产品 ID */
       id: string;

src/typings/api/project.d.ts

@@ -0,0 +1,450 @@
+declare namespace Api {
+  /**
+   * namespace Project
+   *
+   * backend api module: "project/project"
+   */
+  namespace Project {
+    /** 项目状态编码 */
+    type ProjectStatusCode = 'pending' | 'active' | 'paused' | 'completed' | 'cancelled' | 'archived';
+
+    /** 项目状态动作编码 */
+    type ProjectStatusActionCode = 'auto_start' | 'pause' | 'resume' | 'complete' | 'cancel' | 'reopen' | 'archive';
+
+    /** 项目设置基础信息 */
+    interface ProjectSettingBaseInfo {
+      /** 项目 ID */
+      id: string;
+      /** 项目编码 */
+      projectCode: string;
+      /** 项目名称 */
+      projectName: string;
+      /** 项目方向字典值 */
+      directionCode: string;
+      /** 项目类型字典值 */
+      projectType: string;
+      /** 所属产品 ID */
+      productId: string | null;
+      /** 所属产品名称 */
+      productName: string | null;
+      /** 项目负责人用户昵称 */
+      managerUserNickname: string | null;
+      /** 项目负责人用户 ID */
+      managerUserId: string | null;
+      /** 项目状态编码 */
+      statusCode: ProjectStatusCode;
+      /** 计划开始日期 */
+      plannedStartDate: string | null;
+      /** 计划结束日期 */
+      plannedEndDate: string | null;
+      /** 实际开始日期 */
+      actualStartDate: string | null;
+      /** 实际结束日期 */
+      actualEndDate: string | null;
+      /** 项目说明 */
+      projectDesc: string | null;
+      /** 最近一次状态动作原因 */
+      lastStatusReason: string | null;
+    }
+
+    /** 项目生命周期动作 */
+    interface ProjectLifecycleAction {
+      actionCode: Exclude<ProjectStatusActionCode, 'auto_start'>;
+      actionName: string;
+      needReason: boolean;
+    }
+
+    /** 项目生命周期信息 */
+    interface ProjectLifecycleInfo {
+      statusCode: ProjectStatusCode;
+      lastStatusReason: string | null;
+      availableActions: ProjectLifecycleAction[];
+    }
+
+    /** 执行状态编码 */
+    type ProjectExecutionStatusCode = 'pending' | 'active' | 'paused' | 'completed' | 'cancelled';
+
+    /** 执行动作编码 */
+    type ProjectExecutionActionCode = 'start' | 'pause' | 'resume' | 'cancel';
+
+    /** 任务状态编码 */
+    type ProjectTaskStatusCode = 'pending' | 'active' | 'blocked' | 'completed' | 'cancelled';
+
+    /** 任务动作编码 */
+    type ProjectTaskActionCode = 'start' | 'block' | 'resume' | 'complete' | 'cancel';
+
+    interface LifecycleAction<ActionCode extends string = string> {
+      actionCode: ActionCode;
+      actionName: string;
+      needReason: boolean;
+    }
+
+    interface StatusBoardItem {
+      statusCode: string;
+      statusName: string;
+      count: number;
+      sort: number;
+      terminal?: boolean;
+    }
+
+    interface StatusBoard {
+      total: number;
+      items: StatusBoardItem[];
+    }
+
+    interface ProjectExecution {
+      id: string;
+      projectId: string;
+      projectRequirementId: string | null;
+      executionName: string;
+      executionType: string | null;
+      ownerId: string;
+      ownerNickname?: string | null;
+      statusCode: ProjectExecutionStatusCode;
+      statusName: string | null;
+      terminal: boolean;
+      allowEdit: boolean;
+      availableActions: LifecycleAction<ProjectExecutionActionCode>[];
+      plannedStartDate: string | null;
+      plannedEndDate: string | null;
+      actualStartDate: string | null;
+      actualEndDate: string | null;
+      progressRate: number;
+      executionDesc: string | null;
+      lastStatusReason: string | null;
+      createTime: string;
+      updateTime: string;
+    }
+
+    interface ExecutionMember {
+      id: string;
+      executionId: string;
+      userId: string;
+      userNickname?: string | null;
+      joinedAt: string | null;
+      removedAt: string | null;
+      removedReason: string | null;
+    }
+
+    /** 执行成员变更事件类型 */
+    type ExecutionMemberActionType = 'join' | 'inactive' | 'owner_transfer_in' | 'owner_transfer_out';
+
+    /** 执行成员变更历史 */
+    interface ExecutionMemberLog {
+      id: string;
+      executionId: string;
+      actionType: ExecutionMemberActionType;
+      userId: string;
+      userNicknameSnapshot: string | null;
+      operatorUserId: string;
+      operatorNicknameSnapshot: string | null;
+      actionTime: string;
+      reason: string | null;
+    }
+
+    type ExecutionMemberLogSearchParams = CommonType.RecordNullable<
+      Pick<PageParams, 'pageNo' | 'pageSize'> & {
+        actionTypes: ExecutionMemberActionType[];
+        userId: string;
+        startTime: string;
+        endTime: string;
+      }
+    >;
+
+    interface ProjectTask {
+      id: string;
+      projectId: string;
+      executionId: string;
+      parentTaskId: string | null;
+      taskTitle: string;
+      ownerId: string;
+      ownerNickname?: string | null;
+      statusCode: ProjectTaskStatusCode;
+      statusName: string | null;
+      terminal: boolean;
+      allowEdit: boolean;
+      availableActions: LifecycleAction<ProjectTaskActionCode>[];
+      progressRate: number;
+      plannedStartDate: string | null;
+      plannedEndDate: string | null;
+      actualStartDate: string | null;
+      actualEndDate: string | null;
+      taskDesc: string | null;
+      lastStatusReason: string | null;
+      createTime: string;
+      updateTime: string;
+    }
+
+    type ProjectExecutionSearchParams = CommonType.RecordNullable<
+      Pick<PageParams, 'pageNo' | 'pageSize'> & {
+        keyword: string;
+        executionType: string;
+        ownerId: string;
+        statusCode: string;
+        updateTime: string[];
+      }
+    >;
+
+    type ProjectExecutionStatusBoardParams = CommonType.RecordNullable<{
+      keyword: string;
+      executionType: string;
+      ownerId: string;
+      updateTime: string[];
+    }>;
+
+    interface SaveProjectExecutionParams {
+      executionName: string;
+      executionType: string;
+      ownerId: string;
+      projectRequirementId: string | null;
+      plannedStartDate: string | null;
+      plannedEndDate: string | null;
+      executionDesc: string | null;
+      memberUserIds?: string[];
+    }
+
+    interface ChangeExecutionOwnerParams {
+      newOwnerId: string;
+      reason: string | null;
+    }
+
+    interface ChangeExecutionStatusParams {
+      actionCode: ProjectExecutionActionCode;
+      reason: string | null;
+    }
+
+    interface CreateExecutionMemberParams {
+      userId: string;
+    }
+
+    interface InactiveExecutionMemberParams {
+      reason: string;
+    }
+
+    type ProjectTaskSearchParams = CommonType.RecordNullable<
+      Pick<PageParams, 'pageNo' | 'pageSize'> & {
+        keyword: string;
+        parentTaskId: string;
+        ownerId: string;
+        statusCode: string;
+        updateTime: string[];
+      }
+    >;
+
+    type ProjectTaskStatusBoardParams = CommonType.RecordNullable<{
+      keyword: string;
+      parentTaskId: string;
+      ownerId: string;
+      updateTime: string[];
+    }>;
+
+    interface SaveProjectTaskParams {
+      parentTaskId: string | null;
+      taskTitle: string;
+      ownerId: string | null;
+      progressRate?: number;
+      plannedStartDate: string | null;
+      plannedEndDate: string | null;
+      taskDesc: string | null;
+      /** 仅创建任务时生效，编辑接口静默忽略；userId 必须是当前有效执行成员且不能等于 ownerId */
+      assigneeUserIds?: string[];
+    }
+
+    interface ChangeTaskStatusParams {
+      actionCode: ProjectTaskActionCode;
+      reason: string | null;
+    }
+
+    /** 项目设置参数 */
+    interface ProjectSettings {
+      baseInfo: ProjectSettingBaseInfo;
+      lifecycle: ProjectLifecycleInfo;
+    }
+
+    /** 项目设置基础信息参数 */
+    interface UpdateProjectSettingBaseInfoParams {
+      projectName: string;
+      directionCode: string;
+      projectType: string;
+      plannedStartDate: string | null;
+      plannedEndDate: string | null;
+      projectDesc: string | null;
+    }
+
+    /** 项目成员状态 */
+    type ProjectMemberStatus = 0 | 1;
+
+    interface PageParams {
+      pageNo: number;
+      pageSize: number;
+    }
+
+    interface PageResult<T = any> {
+      total: number;
+      list: T[];
+    }
+
+    /** 项目入口页概览统计 */
+    interface ProjectOverviewSummary {
+      /** 项目状态数量映射，key 为后端状态编码 */
+      statusCounts: Record<string, number>;
+    }
+
+    interface Project {
+      /** 项目 ID */
+      id: string;
+      /** 项目编码 */
+      projectCode: string;
+      /** 项目名称 */
+      projectName: string;
+      /** 项目方向字典值 */
+      directionCode: string;
+      /** 项目类型字典值 */
+      projectType: string;
+      /** 所属产品 ID */
+      productId: string | null;
+      /** 所属产品名称 */
+      productName?: string | null;
+      /** 项目负责人用户 ID */
+      managerUserId: string;
+      /** 项目负责人用户昵称 */
+      managerUserNickname?: string | null;
+      /** 项目状态编码 */
+      statusCode: ProjectStatusCode;
+      /** 计划开始日期 */
+      plannedStartDate: string | null;
+      /** 计划结束日期 */
+      plannedEndDate: string | null;
+      /** 实际开始日期 */
+      actualStartDate: string | null;
+      /** 实际结束日期 */
+      actualEndDate: string | null;
+      /** 进度百分比 */
+      progressRate: number;
+      /** 项目说明 */
+      projectDesc: string | null;
+      /** 最近一次状态动作原因 */
+      lastStatusReason: string | null;
+      /** 创建时间 */
+      createTime: string;
+      /** 更新时间 */
+      updateTime: string;
+    }
+
+    interface ProjectContext {
+      currentProject: {
+        id: string;
+        projectCode: string;
+        projectName: string;
+        projectType: string;
+        productId: string | null;
+        managerUserId: string;
+        statusCode: ProjectStatusCode;
+      };
+      currentRole: {
+        roleId: string | null;
+        roleCode: string | null;
+        roleName: string | null;
+        guestFlag: boolean;
+      };
+      navs: Array<{
+        id: string;
+        name: string;
+        path: string;
+        icon: string;
+        sort: number;
+      }>;
+      buttons: string[];
+    }
+
+    interface ProjectMember {
+      /** 成员关系 ID */
+      id: string;
+      /** 用户 ID */
+      userId: string;
+      /** 用户昵称 */
+      userNickname: string;
+      /** 角色 ID */
+      roleId: string;
+      /** 角色名称 */
+      roleName: string;
+      /** 角色编码 */
+      roleCode: string;
+      /** 是否项目负责人 */
+      managerFlag: boolean;
+      /** 成员状态 */
+      status: ProjectMemberStatus;
+      /** 加入时间 */
+      joinedTime: string;
+      /** 退出时间 */
+      leftTime: string | null;
+      /** 备注 */
+      remark: string | null;
+    }
+
+    /** 项目搜索参数 */
+    type ProjectSearchParams = CommonType.RecordNullable<
+      Pick<PageParams, 'pageNo' | 'pageSize'> & {
+        keyword: string;
+        directionCode: string;
+        projectType: string;
+        productId: string;
+        managerUserId: string;
+        statusCode: ProjectStatusCode;
+        updateTime: string[];
+      }
+    >;
+
+    /** 创建/保存项目参数 */
+    type SaveProjectParams = Pick<Project, 'projectName' | 'directionCode' | 'projectType' | 'projectDesc'> & {
+      projectCode: string | null;
+      productId: string | null;
+      managerUserId: string;
+      plannedStartDate: string | null;
+      plannedEndDate: string | null;
+      actualStartDate?: string | null;
+      actualEndDate?: string | null;
+    };
+
+    /** 更新项目参数 */
+    type UpdateProjectParams = { id: string } & SaveProjectParams;
+
+    /** 变更项目状态参数 */
+    interface ChangeProjectStatusParams {
+      id: string;
+      actionCode: ProjectStatusActionCode;
+      reason: string | null;
+    }
+
+    /** 删除项目参数 */
+    interface DeleteProjectParams {
+      id: string;
+      projectName: string;
+      confirmText: string;
+      reason: string;
+    }
+
+    /** 创建项目成员参数 */
+    interface CreateProjectMemberParams {
+      userId: string;
+      roleId: string;
+      remark: string | null;
+      previousManagerUserId?: string | null;
+      previousManagerRoleId?: string | null;
+    }
+
+    /** 更新项目成员参数 */
+    interface UpdateProjectMemberParams {
+      roleId: string;
+      reason: string | null;
+      remark: string | null;
+      previousManagerUserId?: string | null;
+      previousManagerRoleId?: string | null;
+    }
+
+    /** 移出项目成员参数 */
+    interface InactiveProjectMemberParams {
+      reason: string | null;
+    }
+  }
+}

src/typings/api/system-manage.d.ts

@@ -428,6 +428,12 @@ declare namespace Api {
       id: string;
       /** 用户昵称 */
       nickname: string;
+      /** 用户账号 */
+      username?: string | null;
+      /** 部门 ID */
+      deptId?: string | null;
+      /** 部门名称 */
+      deptName?: string | null;
     }
   }
 }

src/typings/components.d.ts

@@ -14,6 +14,10 @@ declare module 'vue' {
     BusinessFormDialog: typeof import('./../components/custom/business-form-dialog.vue')['default']
     BusinessFormDrawer: typeof import('./../components/custom/business-form-drawer.vue')['default']
     BusinessFormSection: typeof import('./../components/custom/business-form-section.vue')['default']
+    BusinessFormSimpleDialog: typeof import('./../components/custom/business-form-simple-dialog.vue')['default']
+    BusinessRichTextEditor: typeof import('./../components/custom/business-rich-text-editor.vue')['default']
+    BusinessRichTextView: typeof import('./../components/custom/business-rich-text-view.vue')['default']
+    BusinessUserSelect: typeof import('./../components/custom/business-user-select.vue')['default']
     ButtonIcon: typeof import('./../components/custom/button-icon.vue')['default']
     CountTo: typeof import('./../components/custom/count-to.vue')['default']
     CustomIconSelect: typeof import('./../components/custom/custom-icon-select.vue')['default']
@@ -58,6 +62,7 @@ declare module 'vue' {
     ElPagination: typeof import('element-plus/es')['ElPagination']
     ElPopconfirm: typeof import('element-plus/es')['ElPopconfirm']
     ElPopover: typeof import('element-plus/es')['ElPopover']
+    ElProgress: typeof import('element-plus/es')['ElProgress']
     ElRadio: typeof import('element-plus/es')['ElRadio']
     ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
     ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
@@ -65,6 +70,7 @@ declare module 'vue' {
     ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
     ElSegmented: typeof import('element-plus/es')['ElSegmented']
     ElSelect: typeof import('element-plus/es')['ElSelect']
+    ElSkeleton: typeof import('element-plus/es')['ElSkeleton']
     ElSpace: typeof import('element-plus/es')['ElSpace']
     ElStatistic: typeof import('element-plus/es')['ElStatistic']
     ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
@@ -114,6 +120,7 @@ declare module 'vue' {
     IconLocalLogo: typeof import('~icons/local/logo')['default']
     'IconMaterialSymbolsLight:rotate90DegreesCcwOutlineRounded': typeof import('~icons/material-symbols-light/rotate90-degrees-ccw-outline-rounded')['default']
     IconMaterialSymbolsLightCheckCircleRounded: typeof import('~icons/material-symbols-light/check-circle-rounded')['default']
+    'IconMdi:paperclip': typeof import('~icons/mdi/paperclip')['default']
     'IconMdi:printer': typeof import('~icons/mdi/printer')['default']
     IconMdiAccountTieOutline: typeof import('~icons/mdi/account-tie-outline')['default']
     IconMdiArrowDownThin: typeof import('~icons/mdi/arrow-down-thin')['default']
@@ -123,6 +130,7 @@ declare module 'vue' {
     IconMdiChevronDoubleUp: typeof import('~icons/mdi/chevron-double-up')['default']
     IconMdiChevronDown: typeof import('~icons/mdi/chevron-down')['default']
     IconMdiChevronRight: typeof import('~icons/mdi/chevron-right')['default']
+    IconMdiCloseCircle: typeof import('~icons/mdi/close-circle')['default']
     IconMdiDeleteOutline: typeof import('~icons/mdi/delete-outline')['default']
     IconMdiDotsHorizontal: typeof import('~icons/mdi/dots-horizontal')['default']
     IconMdiDrag: typeof import('~icons/mdi/drag')['default']
@@ -153,6 +161,7 @@ declare module 'vue' {
     SystemLogo: typeof import('./../components/common/system-logo.vue')['default']
     TableColumnSetting: typeof import('./../components/advanced/table-column-setting.vue')['default']
     TableHeaderOperation: typeof import('./../components/advanced/table-header-operation.vue')['default']
+    TableSearchFields: typeof import('./../components/custom/table-search-fields.vue')['default']
     TableSearchPanel: typeof import('./../components/custom/table-search-panel.vue')['default']
     ThemeSchemaSwitch: typeof import('./../components/common/theme-schema-switch.vue')['default']
     WaveBg: typeof import('./../components/custom/wave-bg.vue')['default']

src/typings/elegant-router.d.ts

@@ -65,6 +65,13 @@ declare module "@elegant-router/types" {
     "product_list": "/product/list";
     "product_requirement": "/product/requirement";
     "product_setting": "/product/setting";
+    "project": "/project";
+    "project_list": "/project/list";
+    "project_project": "/project/project";
+    "project_project_execution": "/project/project/execution";
+    "project_project_overview": "/project/project/overview";
+    "project_project_requirement": "/project/project/requirement";
+    "project_project_setting": "/project/project/setting";
     "system": "/system";
     "system_dict": "/system/dict";
     "system_menu": "/system/menu";
@@ -117,6 +124,7 @@ declare module "@elegant-router/types" {
     | "login"
     | "plugin"
     | "product"
+    | "project"
     | "system"
     | "user-center"
   >;
@@ -172,6 +180,11 @@ declare module "@elegant-router/types" {
     | "product_list"
     | "product_requirement"
     | "product_setting"
+    | "project_list"
+    | "project_project_execution"
+    | "project_project_overview"
+    | "project_project_requirement"
+    | "project_project_setting"
     | "system_dict"
     | "system_menu"
     | "system_post"

src/typings/wangeditor.d.ts

@@ -0,0 +1,18 @@
+declare module '@wangeditor/editor-for-vue' {
+  import type { DefineComponent } from 'vue';
+  import type { IDomEditor, IEditorConfig, IToolbarConfig } from '@wangeditor/editor';
+
+  export const Editor: DefineComponent<{
+    modelValue?: string | null;
+    defaultConfig?: Partial<IEditorConfig>;
+    defaultContent?: unknown[];
+    defaultHtml?: string;
+    mode?: 'default' | 'simple';
+  }>;
+
+  export const Toolbar: DefineComponent<{
+    editor: IDomEditor | null | undefined;
+    defaultConfig?: Partial<IToolbarConfig>;
+    mode?: 'default' | 'simple';
+  }>;
+}

src/utils/sanitize.ts

@@ -0,0 +1,64 @@
+import DOMPurify from 'dompurify';
+
+const ALLOWED_TAGS = [
+  'a',
+  'p',
+  'br',
+  'span',
+  'div',
+  'b',
+  'i',
+  'u',
+  's',
+  'sub',
+  'sup',
+  'strong',
+  'em',
+  'h1',
+  'h2',
+  'h3',
+  'h4',
+  'h5',
+  'h6',
+  'ul',
+  'ol',
+  'li',
+  'blockquote',
+  'pre',
+  'code',
+  'hr',
+  'img',
+  'table',
+  'thead',
+  'tbody',
+  'tr',
+  'th',
+  'td'
+];
+
+const ALLOWED_ATTR = [
+  'href',
+  'target',
+  'rel',
+  'src',
+  'alt',
+  'title',
+  'class',
+  'style',
+  'colspan',
+  'rowspan',
+  'width',
+  'height'
+];
+
+export function sanitizeHtml(html: string | null | undefined): string {
+  if (!html) {
+    return '';
+  }
+
+  return DOMPurify.sanitize(html, {
+    ALLOWED_TAGS,
+    ALLOWED_ATTR,
+    ADD_ATTR: ['target']
+  });
+}

src/views/plugin/editor/quill/index.vue

@@ -1,47 +1,19 @@
 <script setup lang="ts">
-import { onMounted, ref } from 'vue';
-import WangEditor from 'wangeditor';
+import { ref } from 'vue';
+import BusinessRichTextEditor from '@/components/custom/business-rich-text-editor.vue';
 
 defineOptions({ name: 'QuillPage' });
 
-const editor = ref<WangEditor>();
-const domRef = ref<HTMLElement>();
-
-function renderWangEditor() {
-  editor.value = new WangEditor(domRef.value);
-  setEditorConfig();
-  editor.value.create();
-}
-
-function setEditorConfig() {
-  if (editor.value?.config?.zIndex) {
-    editor.value.config.zIndex = 10;
-  }
-}
-
-onMounted(() => {
-  renderWangEditor();
-});
+const value = ref('<p>hello&nbsp;<strong>wangEditor v5</strong></p>');
 </script>
 
 <template>
   <div class="h-full">
     <ElCard header="富文本插件" class="card-wrapper">
-      <div ref="domRef" class="bg-white dark:bg-dark"></div>
+      <BusinessRichTextEditor v-model="value" :height="360" upload-directory="demo" />
       <template #footer>
-        <GithubLink link="https://github.com/wangeditor-team/wangEditor" />
+        <GithubLink link="https://github.com/wangeditor-next/wangEditor-next" />
       </template>
     </ElCard>
   </div>
 </template>
-
-<style scoped>
-:deep(.w-e-toolbar) {
-  background: inherit !important;
-  border-color: var(--el-border-color) !important;
-}
-:deep(.w-e-text-container) {
-  background: inherit;
-  border-color: var(--el-border-color) !important;
-}
-</style>

src/views/product/dashboard/modules/product-activity-timeline-dialog.vue

@@ -247,7 +247,12 @@ watch([() => visible.value, () => props.productId], ([currentVisible, productId]
                   </div>
 
                   <p class="product-activity-dialog__sentence">
-                    <span class="product-activity-dialog__sentence-main">{{ item.compactText }}</span>
+                    <span class="product-activity-dialog__sentence-main">
+                      <template v-for="(part, index) in item.compactTextParts" :key="`${item.id}-${index}`">
+                        <strong v-if="part.strong" class="product-activity-dialog__subject">{{ part.text }}</strong>
+                        <span v-else>{{ part.text }}</span>
+                      </template>
+                    </span>
                     <span v-if="item.statusTransition">，状态：{{ item.statusTransition }}</span>
                     <span v-if="item.reasonText">，原因：{{ item.reasonText }}</span>
                   </p>
@@ -497,6 +502,11 @@ watch([() => visible.value, () => props.productId], ([currentVisible, productId]
   color: var(--el-text-color-primary);
 }
 
+.product-activity-dialog__subject {
+  color: var(--el-text-color-primary);
+  font-weight: 700;
+}
+
 .product-activity-dialog__footer-inner {
   display: flex;
   align-items: center;

src/views/product/dashboard/modules/product-activity-timeline-panel.vue

@@ -112,7 +112,12 @@ watch(
             </div>
 
             <p class="product-activity-panel__sentence">
-              <span class="product-activity-panel__sentence-main">{{ item.compactText }}</span>
+              <span class="product-activity-panel__sentence-main">
+                <template v-for="(part, index) in item.compactTextParts" :key="`${item.id}-${index}`">
+                  <strong v-if="part.strong" class="product-activity-panel__subject">{{ part.text }}</strong>
+                  <span v-else>{{ part.text }}</span>
+                </template>
+              </span>
               <span v-if="item.statusTransition">，状态：{{ item.statusTransition }}</span>
               <span v-if="item.reasonText">，原因：{{ item.reasonText }}</span>
             </p>
@@ -262,6 +267,11 @@ watch(
   color: rgb(15 23 42 / 98%);
 }
 
+.product-activity-panel__subject {
+  color: rgb(15 23 42 / 98%);
+  font-weight: 700;
+}
+
 @media (width <= 768px) {
   .product-activity-panel__body {
     min-height: auto;

src/views/product/dashboard/product-activity.ts

@@ -17,13 +17,20 @@ export type ProductActivityFilterType = 'all' | Api.Product.ProductActivityType;
 
 export type ProductActivityTone = 'sky' | 'emerald' | 'amber' | 'rose' | 'slate';
 
+export interface ProductActivityTextPart {
+  text: string;
+  strong?: boolean;
+}
+
 export interface ProductActivityDisplayItem extends Api.Product.ProductActivityTimelineItem {
   tagLabel: string;
   timeText: string;
   actionText: string;
   displaySummary: string;
   compactText: string;
+  compactTextParts: ProductActivityTextPart[];
   operatorText: string;
+  subjectText: string;
   reasonText: string;
   statusTransition: string;
   tone: ProductActivityTone;
@@ -250,6 +257,10 @@ function isGenericActivitySummary(summaryText: string, actionText: string) {
   return summaryText === actionText || summaryText === actionText.replace('执行了', '执行了');
 }
 
+function isMemberActivityAction(actionType: Api.Product.ProductActivityActionType) {
+  return actionType === 'add_member' || actionType === 'remove_member' || actionType === 'update_member';
+}
+
 function buildMemberChangeSummary(
   item: Api.Product.ProductActivityTimelineItem,
   detailsRecord: ActivityDetailRecord | null,
@@ -263,9 +274,10 @@ function buildMemberChangeSummary(
   }
 
   const memberDetail = roleName ? `${memberName}（${roleName}）` : memberName;
-  const actionLabel = item.actionType === 'add_member' ? '将成员加入产品' : '将成员移出产品';
 
-  return operatorText === '--' ? `${actionLabel}：${memberDetail}` : `${operatorText}${actionLabel}：${memberDetail}`;
+  return operatorText === '--'
+    ? `执行了【${item.actionName}】：${memberDetail}`
+    : `${operatorText}执行了【${item.actionName}】：${memberDetail}`;
 }
 
 function buildMemberUpdateSummary(
@@ -279,8 +291,8 @@ function buildMemberUpdateSummary(
   const roleText = roleTransitionText ? `，角色：${roleTransitionText}` : '';
 
   return operatorText === '--'
-    ? `调整成员：${memberText}${roleText}`
-    : `${operatorText}调整成员：${memberText}${roleText}`;
+    ? `执行了【${item.actionName}】：${memberText}${roleText}`
+    : `${operatorText}执行了【${item.actionName}】：${memberText}${roleText}`;
 }
 
 function buildManagerChangeSummary(detailsRecord: ActivityDetailRecord | null, operatorText: string) {
@@ -309,15 +321,11 @@ function buildManagerChangeSummary(detailsRecord: ActivityDetailRecord | null, o
 
 function resolveDetailedSummary(
   item: Api.Product.ProductActivityTimelineItem,
-  operatorText: string,
-  actionText: string
+  detailsRecord: ActivityDetailRecord | null,
+  texts: { operatorText: string; actionText: string }
 ) {
+  const { operatorText, actionText } = texts;
   const summaryText = item.summary?.trim() || '';
-  const detailsRecord = parseActivityDetails(item.details);
-
-  if (!isGenericActivitySummary(summaryText, actionText)) {
-    return summaryText;
-  }
 
   if (item.actionType === 'add_member' || item.actionType === 'remove_member') {
     return buildMemberChangeSummary(item, detailsRecord, operatorText) || summaryText || actionText;
@@ -327,6 +335,10 @@ function resolveDetailedSummary(
     return buildMemberUpdateSummary(item, detailsRecord, operatorText);
   }
 
+  if (!isGenericActivitySummary(summaryText, actionText)) {
+    return summaryText;
+  }
+
   if (item.actionType === 'change_manager') {
     return buildManagerChangeSummary(detailsRecord, operatorText) || summaryText || actionText;
   }
@@ -334,13 +346,31 @@ function resolveDetailedSummary(
   return summaryText || actionText;
 }
 
+function buildProductActivityTextParts(text: string, subjectText: string): ProductActivityTextPart[] {
+  const normalizedSubject = subjectText.trim();
+  const subjectIndex = normalizedSubject ? text.indexOf(normalizedSubject) : -1;
+
+  if (subjectIndex < 0) {
+    return [{ text }];
+  }
+
+  return [
+    { text: text.slice(0, subjectIndex) },
+    { text: normalizedSubject, strong: true },
+    { text: text.slice(subjectIndex + normalizedSubject.length) }
+  ].filter(part => part.text);
+}
+
 export function buildProductActivityDisplayItem(
   item: Api.Product.ProductActivityTimelineItem
 ): ProductActivityDisplayItem {
   const operatorText = item.operatorName?.trim() || '--';
   const actionText =
     operatorText === '--' ? `执行了【${item.actionName}】` : `${operatorText}执行了【${item.actionName}】`;
-  const displaySummary = item.type === 'status' ? actionText : resolveDetailedSummary(item, operatorText, actionText);
+  const detailsRecord = parseActivityDetails(item.details);
+  const subjectText = isMemberActivityAction(item.actionType) ? getActivityTargetUserName(item, detailsRecord) : '';
+  const displaySummary =
+    item.type === 'status' ? actionText : resolveDetailedSummary(item, detailsRecord, { operatorText, actionText });
   const compactText = displaySummary;
 
   return {
@@ -350,7 +380,9 @@ export function buildProductActivityDisplayItem(
     actionText,
     displaySummary,
     compactText,
+    compactTextParts: buildProductActivityTextParts(compactText, subjectText),
     operatorText,
+    subjectText,
     reasonText: item.reason?.trim() || '',
     statusTransition:
       item.type === 'status' && item.fromStatus && item.toStatus

src/views/product/list/index.vue

@@ -6,7 +6,7 @@ import dayjs from 'dayjs';
 import { CircleCheckFilled, DeleteFilled, FolderOpened, VideoPause } from '@element-plus/icons-vue';
 import { RDMS_OBJECT_DIRECTION_DICT_CODE } from '@/constants/dict';
 import { OBJECT_CONTEXT_QUERY_KEY } from '@/constants/object-context';
-import { fetchGetProductPage, fetchGetUserSimpleList } from '@/service/api';
+import { fetchGetProductOverviewSummary, fetchGetProductPage, fetchGetUserSimpleList } from '@/service/api';
 import { useDict } from '@/hooks/business/dict';
 import { useRouterPush } from '@/hooks/common/router';
 import { useUIPaginatedTable } from '@/hooks/common/table';
@@ -27,7 +27,6 @@ interface StatusNavMeta {
 
 type ProductPageResponse = Awaited<ReturnType<typeof fetchGetProductPage>>;
 
-const PRODUCT_OPTION_PAGE_SIZE = 200;
 const PRODUCT_ENTRY_ROUTE_PATH = '/product/list';
 
 function getInitSearchParams(): Api.Product.ProductSearchParams {
@@ -72,59 +71,6 @@ function formatDateTime(value?: string | null) {
   return dayjs(value).format('YYYY-MM-DD HH:mm:ss');
 }
 
-async function fetchProductTotal(params: Api.Product.ProductSearchParams) {
-  const { error, data } = await fetchGetProductPage({
-    ...params,
-    pageNo: 1,
-    pageSize: 1
-  });
-
-  if (error || !data) {
-    return 0;
-  }
-
-  return data.total;
-}
-
-async function fetchAllProducts() {
-  async function collect(pageNo: number, list: Api.Product.Product[]): Promise<Api.Product.Product[] | null> {
-    const { error, data } = await fetchGetProductPage({
-      pageNo,
-      pageSize: PRODUCT_OPTION_PAGE_SIZE
-    });
-
-    if (error || !data) {
-      return null;
-    }
-
-    const nextList = list.concat(data.list);
-
-    if (nextList.length >= data.total || data.list.length === 0) {
-      return nextList;
-    }
-
-    return collect(pageNo + 1, nextList);
-  }
-
-  return collect(1, []);
-}
-
-function createManagerOptions(products: Api.Product.Product[], users: Api.SystemManage.UserSimple[]) {
-  const managerIdSet = new Set(products.map(item => String(item.managerUserId)).filter(Boolean));
-  const userMap = new Map(users.map(item => [String(item.id), item]));
-
-  const options = Array.from(managerIdSet).map(managerUserId => {
-    return (
-      userMap.get(managerUserId) || {
-        id: managerUserId,
-        nickname: String(managerUserId)
-      }
-    );
-  });
-
-  return sortManagerOptions(options);
-}
-
 const statusNavMetas: StatusNavMeta[] = [
   {
     key: 'active',
@@ -166,15 +112,13 @@ const { routerPush } = useRouterPush();
 
 const { dictData: directionOptions, getLabel: getDirectionDictLabel } = useDict(RDMS_OBJECT_DIRECTION_DICT_CODE);
 
-const statusCounts = ref<Record<Api.Product.ProductStatusCode, number>>({
+const statusCounts = ref<Record<string, number>>({
   active: 0,
   archived: 0,
   paused: 0,
   abandoned: 0
 });
 
-const recentUpdatedCount = ref(0);
-
 const managerLabelMap = computed(() => {
   return new Map(managerUserOptions.value.map(item => [String(item.id), item.nickname]));
 });
@@ -182,7 +126,7 @@ const managerLabelMap = computed(() => {
 const statusItems = computed(() =>
   statusNavMetas.map(item => ({
     ...item,
-    count: statusCounts.value[item.key]
+    count: statusCounts.value[item.key] ?? 0
   }))
 );
 
@@ -194,7 +138,7 @@ const overviewMetrics = computed(() => [
   },
   {
     label: '当前启用',
-    value: statusCounts.value.active,
+    value: statusCounts.value.active ?? 0,
     hint: '正在持续服务和维护的产品'
   },
   {
@@ -203,9 +147,9 @@ const overviewMetrics = computed(() => [
     hint: '已加载的方向字典项数量'
   },
   {
-    label: '30天内更新',
-    value: recentUpdatedCount.value,
-    hint: '最近 30 天内发生过更新的产品'
+    label: '废弃产品',
+    value: statusCounts.value.abandoned ?? 0,
+    hint: '已明确停止建设的产品'
   }
 ]);
 
@@ -312,44 +256,33 @@ const { columns, columnChecks, data, loading, getDataByPage, mobilePagination }
         />
       )
     }
-  ]
+  ],
+  immediate: false
 });
 
 async function loadManagerOptions() {
-  const [allProducts, userSimpleResult] = await Promise.all([fetchAllProducts(), fetchGetUserSimpleList()]);
+  const { error, data: userList } = await fetchGetUserSimpleList();
 
-  const userSimpleList =
-    userSimpleResult.error || !userSimpleResult.data ? [] : sortManagerOptions(userSimpleResult.data);
-
-  managerUserOptions.value = userSimpleList;
-
-  if (!allProducts) {
+  if (error || !userList) {
+    managerUserOptions.value = [];
     managerFilterOptions.value = [];
     return;
   }
 
-  managerFilterOptions.value = createManagerOptions(allProducts, userSimpleList);
+  const userSimpleList = sortManagerOptions(userList);
+  managerUserOptions.value = userSimpleList;
+  managerFilterOptions.value = userSimpleList;
 }
 
 async function loadOverviewData() {
-  const end = dayjs().endOf('day').format('YYYY-MM-DD HH:mm:ss');
-  const start = dayjs().subtract(30, 'day').startOf('day').format('YYYY-MM-DD HH:mm:ss');
+  const { error, data: overviewSummary } = await fetchGetProductOverviewSummary();
 
-  const [activeTotal, archivedTotal, pausedTotal, abandonedTotal, recentTotal] = await Promise.all([
-    fetchProductTotal({ pageNo: 1, pageSize: 1, statusCode: 'active' }),
-    fetchProductTotal({ pageNo: 1, pageSize: 1, statusCode: 'archived' }),
-    fetchProductTotal({ pageNo: 1, pageSize: 1, statusCode: 'paused' }),
-    fetchProductTotal({ pageNo: 1, pageSize: 1, statusCode: 'abandoned' }),
-    fetchProductTotal({ pageNo: 1, pageSize: 1, updateTime: [start, end] })
-  ]);
+  if (error || !overviewSummary) {
+    statusCounts.value = {};
+    return;
+  }
 
-  statusCounts.value = {
-    active: activeTotal,
-    archived: archivedTotal,
-    paused: pausedTotal,
-    abandoned: abandonedTotal
-  };
-  recentUpdatedCount.value = recentTotal;
+  statusCounts.value = overviewSummary.statusCounts || {};
 }
 
 async function reloadProductTable(page = searchParams.pageNo ?? 1) {

src/views/product/list/modules/product-operate-dialog.vue

@@ -4,6 +4,7 @@ import { RDMS_OBJECT_DIRECTION_DICT_CODE } from '@/constants/dict';
 import { fetchCreateProduct, fetchGetProduct, fetchUpdateProduct } from '@/service/api';
 import { useForm, useFormRules } from '@/hooks/common/form';
 import BusinessFormDialog from '@/components/custom/business-form-dialog.vue';
+import BusinessUserSelect from '@/components/custom/business-user-select.vue';
 import DictSelect from '@/components/custom/dict-select.vue';
 
 defineOptions({ name: 'ProductOperateDialog' });
@@ -166,14 +167,14 @@ watch(visible, async value => {
   <BusinessFormDialog
     v-model="visible"
     :title="dialogTitle"
-    preset="lg"
+    preset="sm"
     :loading="loading"
     :confirm-loading="submitting"
     @confirm="handleSubmit"
   >
     <ElForm ref="formRef" :model="model" :rules="rules" label-position="top">
       <ElRow :gutter="16">
-        <ElCol :span="12">
+        <ElCol :span="24">
           <ElFormItem v-if="isEditMode" label="产品编码" prop="code">
             <ElInput
               :model-value="model.code"
@@ -186,12 +187,12 @@ watch(visible, async value => {
             <ElInput v-model="model.code" clearable placeholder="不填则由后端自动生成" />
           </ElFormItem>
         </ElCol>
-        <ElCol :span="12">
+        <ElCol :span="24">
           <ElFormItem label="产品名称" prop="name">
             <ElInput v-model="model.name" clearable maxlength="128" placeholder="请输入产品名称" />
           </ElFormItem>
         </ElCol>
-        <ElCol :span="12">
+        <ElCol :span="24">
           <ElFormItem label="产品方向" prop="directionCode">
             <DictSelect
               v-model="model.directionCode"
@@ -201,7 +202,7 @@ watch(visible, async value => {
             />
           </ElFormItem>
         </ElCol>
-        <ElCol :span="12">
+        <ElCol :span="24">
           <ElFormItem v-if="isEditMode">
             <template #label>
               <span class="business-form-label-with-tip">
@@ -225,9 +226,11 @@ watch(visible, async value => {
             />
           </ElFormItem>
           <ElFormItem v-else label="产品经理" prop="managerUserId">
-            <ElSelect v-model="model.managerUserId" clearable filterable placeholder="请选择产品经理">
-              <ElOption v-for="item in managerUserOptions" :key="item.id" :label="item.nickname" :value="item.id" />
-            </ElSelect>
+            <BusinessUserSelect
+              v-model="model.managerUserId"
+              :options="managerUserOptions"
+              placeholder="请选择产品经理"
+            />
           </ElFormItem>
         </ElCol>
         <ElCol :span="24">

src/views/product/list/modules/product-search.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
+import { computed } from 'vue';
 import { RDMS_OBJECT_DIRECTION_DICT_CODE } from '@/constants/dict';
-import DictSelect from '@/components/custom/dict-select.vue';
-import TableSearchPanel from '@/components/custom/table-search-panel.vue';
+import TableSearchFields, { type SearchField } from '@/components/custom/table-search-fields.vue';
 
 defineOptions({ name: 'ProductSearch' });
 
@@ -9,7 +9,7 @@ interface Props {
   managerOptions: Api.SystemManage.UserSimple[];
 }
 
-defineProps<Props>();
+const props = defineProps<Props>();
 
 interface Emits {
   (e: 'reset'): void;
@@ -20,6 +20,32 @@ const emit = defineEmits<Emits>();
 
 const model = defineModel<Api.Product.ProductSearchParams>('model', { required: true });
 
+const fields = computed<SearchField[]>(() => [
+  {
+    key: 'keyword',
+    label: '关键词',
+    type: 'input',
+    placeholder: '产品名称 / 编号'
+  },
+  {
+    key: 'managerUserId',
+    label: '产品经理',
+    type: 'select',
+    options: props.managerOptions.map(item => ({
+      label: item.nickname,
+      value: item.id
+    })),
+    placeholder: '筛选产品经理'
+  },
+  {
+    key: 'directionCode',
+    label: '产品方向',
+    type: 'dict',
+    dictCode: RDMS_OBJECT_DIRECTION_DICT_CODE,
+    placeholder: '筛选产品方向'
+  }
+]);
+
 function reset() {
   emit('reset');
 }
@@ -30,30 +56,7 @@ function search() {
 </script>
 
 <template>
-  <TableSearchPanel :model="model" :action-col-lg="6" @reset="reset" @search="search">
-    <ElCol :lg="6" :md="12" :sm="12">
-      <ElFormItem label="关键词">
-        <ElInput v-model="model.keyword" clearable placeholder="产品名称 / 编号" />
-      </ElFormItem>
-    </ElCol>
-    <ElCol :lg="6" :md="12" :sm="12">
-      <ElFormItem label="产品经理">
-        <ElSelect v-model="model.managerUserId" clearable filterable placeholder="筛选产品经理">
-          <ElOption v-for="item in managerOptions" :key="item.id" :label="item.nickname" :value="item.id" />
-        </ElSelect>
-      </ElFormItem>
-    </ElCol>
-    <ElCol :lg="6" :md="12" :sm="12">
-      <ElFormItem label="产品方向">
-        <DictSelect
-          v-model="model.directionCode"
-          :dict-code="RDMS_OBJECT_DIRECTION_DICT_CODE"
-          filterable
-          placeholder="筛选产品方向"
-        />
-      </ElFormItem>
-    </ElCol>
-  </TableSearchPanel>
+  <TableSearchFields v-model="model" :fields="fields" :columns="3" @reset="reset" @search="search" />
 </template>
 
 <style scoped></style>

src/views/product/requirement/index.vue

@@ -3,10 +3,7 @@ import { computed, onMounted, reactive, ref, watch } from 'vue';
 import type { TableInstance } from 'element-plus';
 import { ElButton, ElTag } from 'element-plus';
 import dayjs from 'dayjs';
-import {
-  RDMS_REQ_CATEGORY_DICT_CODE,
-  RDMS_REQ_PRIORITY_DICT_CODE
-} from '@/constants/dict';
+import { RDMS_REQ_CATEGORY_DICT_CODE, RDMS_REQ_PRIORITY_DICT_CODE } from '@/constants/dict';
 import {
   fetchChangeRequirementStatus,
   fetchDeleteRequirement,
@@ -90,7 +87,7 @@ function formatDateTime(value?: string | null) {
 }
 
 function isTerminalStatus(statusCode: string) {
-  return terminalStatusOptions.value.some(option => option === statusCode);
+  return terminalStatusOptions.value.includes(statusCode);
 }
 
 function canSplitRequirement(row: Api.Product.Requirement) {
@@ -287,9 +284,7 @@ const columns = computed(() => [
     width: 100,
     align: 'center',
     formatter: (row: Api.Product.Requirement) => (
-      <ElTag type={getRequirementStatusTagType(row.statusCode)}>
-        {getStatusLabel(row.statusCode)}
-      </ElTag>
+      <ElTag type={getRequirementStatusTagType(row.statusCode)}>{getStatusLabel(row.statusCode)}</ElTag>
     )
   },
   {

src/views/product/setting/index.vue

@@ -423,7 +423,9 @@ watch(
       :member="selectedMember"
       :current-manager="currentManager"
       :role-options="roleOptions"
-      :user-options="userOptions"
+      :user-options="
+        userOptions.filter(user => !members.some(member => member.status === 0 && member.userId === user.id))
+      "
       @submit="handleSubmitMemberOperate"
     />
     <MemberRemoveDialog

src/views/product/setting/modules/base-info-dialog.vue

@@ -95,7 +95,7 @@ watch(
   <BusinessFormDialog
     v-model="visible"
     title="编辑基础信息"
-    preset="lg"
+    preset="sm"
     :confirm-disabled="confirmDisabled"
     @confirm="handleConfirm"
   >
@@ -103,12 +103,42 @@ watch(
 
     <ElForm ref="formRef" :model="model" :rules="rules" label-position="top">
       <ElRow :gutter="16">
-        <ElCol :span="12">
+        <ElCol :span="24">
           <ElFormItem label="产品编码">
             <ElInput :model-value="baseInfo?.code || ''" readonly class="base-info-dialog__readonly-input" />
           </ElFormItem>
         </ElCol>
-        <ElCol :span="12">
+        <ElCol :span="24">
+          <ElFormItem label="产品名称" prop="name">
+            <ElInput v-if="baseInfoEditable" v-model="model.name" maxlength="128" placeholder="请输入产品名称" />
+            <ElInput
+              v-else
+              :model-value="model.name"
+              readonly
+              class="base-info-dialog__readonly-input"
+              placeholder="未获取到产品名称"
+            />
+          </ElFormItem>
+        </ElCol>
+        <ElCol :span="24">
+          <ElFormItem label="产品方向" prop="directionCode">
+            <DictSelect
+              v-if="baseInfoEditable"
+              v-model="model.directionCode"
+              :dict-code="RDMS_OBJECT_DIRECTION_DICT_CODE"
+              filterable
+              placeholder="请选择产品方向"
+            />
+            <ElInput
+              v-else
+              :model-value="directionDisplayName"
+              readonly
+              class="base-info-dialog__readonly-input"
+              placeholder="未获取到产品方向"
+            />
+          </ElFormItem>
+        </ElCol>
+        <ElCol :span="24">
           <ElFormItem>
             <template #label>
               <span class="business-form-label-with-tip">
@@ -131,36 +161,6 @@ watch(
             />
           </ElFormItem>
         </ElCol>
-        <ElCol :span="12">
-          <ElFormItem label="产品名称" prop="name">
-            <ElInput v-if="baseInfoEditable" v-model="model.name" maxlength="128" placeholder="请输入产品名称" />
-            <ElInput
-              v-else
-              :model-value="model.name"
-              readonly
-              class="base-info-dialog__readonly-input"
-              placeholder="未获取到产品名称"
-            />
-          </ElFormItem>
-        </ElCol>
-        <ElCol :span="12">
-          <ElFormItem label="产品方向" prop="directionCode">
-            <DictSelect
-              v-if="baseInfoEditable"
-              v-model="model.directionCode"
-              :dict-code="RDMS_OBJECT_DIRECTION_DICT_CODE"
-              filterable
-              placeholder="请选择产品方向"
-            />
-            <ElInput
-              v-else
-              :model-value="directionDisplayName"
-              readonly
-              class="base-info-dialog__readonly-input"
-              placeholder="未获取到产品方向"
-            />
-          </ElFormItem>
-        </ElCol>
         <ElCol :span="24">
           <ElFormItem label="产品描述">
             <ElInput

src/views/product/setting/modules/member-operate-dialog.vue

@@ -3,6 +3,7 @@ import { computed, nextTick, reactive, watch } from 'vue';
 import { useForm, useFormRules } from '@/hooks/common/form';
 import BusinessFormDialog from '@/components/custom/business-form-dialog.vue';
 import BusinessFormSection from '@/components/custom/business-form-section.vue';
+import BusinessUserSelect from '@/components/custom/business-user-select.vue';
 import { getPreviousManagerRoleOptions, shouldRequireManagerHandover } from '../shared';
 
 defineOptions({ name: 'MemberOperateDialog' });
@@ -136,21 +137,24 @@ watch(
 </script>
 
 <template>
-  <BusinessFormDialog v-model="visible" :title="dialogTitle" preset="lg" @confirm="handleConfirm">
-    <ElForm ref="formRef" :model="model" :rules="rules" label-position="top">
+  <BusinessFormDialog v-model="visible" :title="dialogTitle" preset="sm" @confirm="handleConfirm">
+    <ElForm ref="formRef" :model="model" :rules="rules" label-position="top" :validate-on-rule-change="false">
       <BusinessFormSection title="成员信息">
         <ElRow :gutter="16">
-          <ElCol :span="12">
+          <ElCol :span="24">
             <ElFormItem v-if="mode === 'create'" label="成员用户" prop="userId">
-              <ElSelect v-model="model.userId" class="w-full" filterable placeholder="请选择成员用户">
-                <ElOption v-for="item in userOptions" :key="item.id" :label="item.nickname" :value="item.id" />
-              </ElSelect>
+              <BusinessUserSelect v-model="model.userId" :options="userOptions" placeholder="请选择成员用户" />
             </ElFormItem>
             <ElFormItem v-else label="成员用户">
-              <ElInput :model-value="member?.userNickname || userLabelMap.get(member?.userId || '') || ''" readonly />
+              <ElInput
+                :model-value="member?.userNickname || userLabelMap.get(member?.userId || '') || ''"
+                readonly
+                class="member-operate-dialog__readonly-input"
+                placeholder="未获取到成员用户"
+              />
             </ElFormItem>
           </ElCol>
-          <ElCol :span="12">
+          <ElCol :span="24">
             <ElFormItem label="目标角色" prop="roleId">
               <ElSelect v-model="model.roleId" class="w-full" placeholder="请选择角色">
                 <ElOption v-for="item in roleOptions" :key="item.id" :label="item.name" :value="item.id" />
@@ -201,3 +205,22 @@ watch(
     </ElForm>
   </BusinessFormDialog>
 </template>
+
+<style scoped>
+:deep(.member-operate-dialog__readonly-input .el-input__wrapper) {
+  background: linear-gradient(180deg, rgb(241 245 249 / 98%), rgb(226 232 240 / 94%)), rgb(241 245 249);
+  box-shadow: 0 0 0 1px rgb(203 213 225 / 96%) inset;
+  cursor: default;
+}
+
+:deep(.member-operate-dialog__readonly-input .el-input__wrapper:hover),
+:deep(.member-operate-dialog__readonly-input.is-focus .el-input__wrapper) {
+  box-shadow: 0 0 0 1px rgb(203 213 225 / 96%) inset;
+}
+
+:deep(.member-operate-dialog__readonly-input .el-input__inner) {
+  color: rgb(51 65 85 / 96%);
+  cursor: default;
+  -webkit-text-fill-color: rgb(51 65 85 / 96%);
+}
+</style>

src/views/product/setting/modules/setting-team-panel.vue

@@ -134,7 +134,7 @@ function getMemberStatusTagType(status: Api.Product.ProductMemberStatus) {
               :disabled="row.status !== 0 || row.managerFlag"
               @click="emit('edit', row)"
             >
-              调整角色
+              编辑
             </ElButton>
             <ElButton
               v-auth="{ code: 'project:product:update', source: 'object' }"

src/views/project/list/index.vue

@@ -0,0 +1,406 @@
+<script setup lang="tsx">
+import { computed, onMounted, reactive, ref } from 'vue';
+import { ElButton, ElTag } from 'element-plus';
+import dayjs from 'dayjs';
+import { RDMS_OBJECT_DIRECTION_DICT_CODE, RDMS_PROJECT_TYPE_DICT_CODE } from '@/constants/dict';
+import { OBJECT_CONTEXT_QUERY_KEY } from '@/constants/object-context';
+import { fetchGetProjectOverviewSummary, fetchGetProjectPage, fetchGetUserSimpleList } from '@/service/api';
+import { useDict } from '@/hooks/business/dict';
+import { useRouterPush } from '@/hooks/common/router';
+import { useUIPaginatedTable } from '@/hooks/common/table';
+import BusinessTableActionCell from '@/components/custom/business-table-action-cell';
+import { getProjectStatusLabel, getProjectStatusTagType, isProjectEditable } from '../shared/project-master-data';
+import ProjectOperateDialog from './modules/project-operate-dialog.vue';
+import ProjectOverviewCard from './modules/project-overview-card.vue';
+import ProjectSearch from './modules/project-search.vue';
+
+defineOptions({ name: 'ProjectList' });
+
+type ProjectPageResponse = Awaited<ReturnType<typeof fetchGetProjectPage>>;
+
+const PROJECT_ENTRY_ROUTE_PATH = '/project/list';
+
+function getInitSearchParams(): Api.Project.ProjectSearchParams {
+  return {
+    pageNo: 1,
+    pageSize: 10,
+    keyword: '',
+    directionCode: undefined,
+    projectType: undefined,
+    productId: undefined,
+    managerUserId: undefined,
+    statusCode: undefined,
+    updateTime: undefined
+  };
+}
+
+function transformProjectPage(response: ProjectPageResponse, pageNo: number, pageSize: number) {
+  if (!response.error && response.data) {
+    return {
+      data: response.data.list,
+      pageNum: pageNo,
+      pageSize,
+      total: response.data.total
+    };
+  }
+
+  return {
+    data: [],
+    pageNum: pageNo,
+    pageSize,
+    total: 0
+  };
+}
+
+function sortManagerOptions(list: Api.SystemManage.UserSimple[]) {
+  return list.slice().sort((left, right) => left.nickname.localeCompare(right.nickname, 'zh-CN'));
+}
+
+function formatDateTime(value?: string | null) {
+  if (!value) {
+    return '--';
+  }
+
+  return dayjs(value).format('YYYY-MM-DD HH:mm:ss');
+}
+
+const searchParams = reactive(getInitSearchParams());
+const selectedStatus = ref<Api.Project.ProjectStatusCode>('active');
+const managerFilterOptions = ref<Api.SystemManage.UserSimple[]>([]);
+const managerUserOptions = ref<Api.SystemManage.UserSimple[]>([]);
+const operateVisible = ref(false);
+const editingRow = ref<Api.Project.Project | null>(null);
+const { routerPush } = useRouterPush();
+
+const { dictData: directionOptions, getLabel: getDirectionDictLabel } = useDict(RDMS_OBJECT_DIRECTION_DICT_CODE);
+const { getLabel: getProjectTypeLabel } = useDict(RDMS_PROJECT_TYPE_DICT_CODE);
+
+const statusCounts = ref<Record<string, number>>({
+  pending: 0,
+  active: 0,
+  paused: 0,
+  completed: 0,
+  cancelled: 0,
+  archived: 0
+});
+
+const statusOptions = computed(() => [
+  { value: 'pending', label: '待开始' },
+  { value: 'active', label: '进行中' },
+  { value: 'paused', label: '已暂停' },
+  { value: 'completed', label: '已完成' },
+  { value: 'cancelled', label: '作废项目' },
+  { value: 'archived', label: '归档项目' }
+]);
+
+const managerLabelMap = computed(() => {
+  return new Map(managerUserOptions.value.map(item => [String(item.id), item.nickname]));
+});
+
+function getDirectionLabel(directionCode?: string | null) {
+  return getDirectionDictLabel(directionCode, '--');
+}
+
+function getProjectTypeLabelByCode(projectType?: string | null) {
+  return getProjectTypeLabel(projectType, '--');
+}
+
+function getManagerLabel(managerUserId?: string | null) {
+  if (!managerUserId) {
+    return '--';
+  }
+
+  return managerLabelMap.value.get(String(managerUserId)) || String(managerUserId);
+}
+
+function createRequestParams(): Api.Project.ProjectSearchParams {
+  return {
+    ...searchParams,
+    keyword: searchParams.keyword?.trim() || undefined,
+    statusCode: selectedStatus.value
+  };
+}
+
+const { columns, columnChecks, data, loading, getDataByPage, mobilePagination } = useUIPaginatedTable<
+  ProjectPageResponse,
+  Api.Project.Project
+>({
+  paginationProps: {
+    currentPage: searchParams.pageNo,
+    pageSize: searchParams.pageSize
+  },
+  api: () => fetchGetProjectPage(createRequestParams()),
+  transform: response => transformProjectPage(response, searchParams.pageNo ?? 1, searchParams.pageSize ?? 10),
+  onPaginationParamsChange: params => {
+    searchParams.pageNo = params.currentPage ?? 1;
+    searchParams.pageSize = params.pageSize ?? 10;
+  },
+  columns: () => [
+    { prop: 'index', type: 'index', label: '序号', width: 64 },
+    {
+      prop: 'projectName',
+      label: '项目名称',
+      minWidth: 220,
+      formatter: row => (
+        <ElButton link type="primary" class="project-name-link" onClick={() => enterProjectContext(row)}>
+          {row.projectName}
+        </ElButton>
+      )
+    },
+    { prop: 'projectCode', label: '项目编码', minWidth: 140, showOverflowTooltip: true },
+    {
+      prop: 'directionCode',
+      label: '项目方向',
+      minWidth: 140,
+      showOverflowTooltip: true,
+      formatter: row => getDirectionLabel(row.directionCode)
+    },
+    {
+      prop: 'projectType',
+      label: '项目类型',
+      minWidth: 140,
+      showOverflowTooltip: true,
+      formatter: row => getProjectTypeLabelByCode(row.projectType)
+    },
+    {
+      prop: 'managerUserId',
+      label: '项目经理',
+      minWidth: 120,
+      formatter: row => getManagerLabel(row.managerUserId)
+    },
+    {
+      prop: 'progressRate',
+      label: '进度',
+      width: 100,
+      align: 'center',
+      formatter: () => '--'
+    },
+    {
+      prop: 'statusCode',
+      label: '状态',
+      width: 100,
+      align: 'center',
+      formatter: row => (
+        <ElTag type={getProjectStatusTagType(row.statusCode)}>{getProjectStatusLabel(row.statusCode)}</ElTag>
+      )
+    },
+    {
+      prop: 'updateTime',
+      label: '最近更新',
+      width: 170,
+      align: 'center',
+      formatter: row => formatDateTime(row.updateTime)
+    },
+    {
+      prop: 'operate',
+      label: '操作',
+      width: 108,
+      align: 'center',
+      fixed: 'right',
+      formatter: row => (
+        <BusinessTableActionCell
+          actions={[
+            {
+              key: 'edit',
+              label: '编辑',
+              buttonType: 'primary',
+              disabled: !isProjectEditable(row.statusCode),
+              onClick: () => openEdit(row)
+            }
+          ]}
+        />
+      )
+    }
+  ],
+  immediate: false
+});
+
+async function loadManagerOptions() {
+  const { error, data: userList } = await fetchGetUserSimpleList();
+
+  if (error || !userList) {
+    managerUserOptions.value = [];
+    managerFilterOptions.value = [];
+    return;
+  }
+
+  const userSimpleList = sortManagerOptions(userList);
+  managerUserOptions.value = userSimpleList;
+  managerFilterOptions.value = userSimpleList;
+}
+
+async function loadOverviewData() {
+  const { error, data: overviewSummary } = await fetchGetProjectOverviewSummary();
+
+  if (error || !overviewSummary) {
+    statusCounts.value = {};
+    return;
+  }
+
+  statusCounts.value = overviewSummary.statusCounts || {};
+}
+
+async function reloadProjectTable(page = searchParams.pageNo ?? 1) {
+  await getDataByPage(page);
+}
+
+async function refreshPageData(page = searchParams.pageNo ?? 1) {
+  await Promise.all([loadManagerOptions(), loadOverviewData(), reloadProjectTable(page)]);
+}
+
+async function handleSearch() {
+  await reloadProjectTable(1);
+}
+
+async function handleResetSearch() {
+  const pageSize = searchParams.pageSize ?? 10;
+
+  Object.assign(searchParams, getInitSearchParams(), {
+    pageSize
+  });
+
+  await reloadProjectTable(1);
+}
+
+async function handleStatusChange(status: Api.Project.ProjectStatusCode) {
+  selectedStatus.value = status;
+  await reloadProjectTable(1);
+}
+
+function openCreate() {
+  editingRow.value = null;
+  operateVisible.value = true;
+}
+
+function openEdit(row: Api.Project.Project) {
+  editingRow.value = row;
+  operateVisible.value = true;
+}
+
+async function enterProjectContext(row: Api.Project.Project) {
+  await routerPush({
+    path: PROJECT_ENTRY_ROUTE_PATH,
+    query: {
+      [OBJECT_CONTEXT_QUERY_KEY]: row.id
+    }
+  });
+}
+
+async function handleProjectSubmitted(projectId?: string) {
+  const isEditing = Boolean(projectId && editingRow.value?.id === projectId);
+
+  await refreshPageData(isEditing ? (searchParams.pageNo ?? 1) : 1);
+
+  if (isEditing) {
+    editingRow.value = null;
+  }
+}
+
+onMounted(async () => {
+  await refreshPageData();
+});
+</script>
+
+<template>
+  <div
+    class="min-h-560px gap-16px overflow-hidden xl:grid xl:grid-cols-[396px_minmax(0,1fr)] lt-xl:flex lt-xl:flex-col lt-xl:overflow-auto"
+  >
+    <div class="flex-col-stretch gap-16px xl:min-h-0">
+      <ProjectOverviewCard
+        :status-counts="statusCounts"
+        :direction-count="directionOptions.length"
+        :selected-status="selectedStatus"
+        @status-change="handleStatusChange"
+      />
+    </div>
+
+    <div class="flex-col-stretch gap-16px xl:min-h-0">
+      <ProjectSearch
+        v-model:model="searchParams"
+        :manager-options="managerFilterOptions"
+        @reset="handleResetSearch"
+        @search="handleSearch"
+      />
+
+      <ElCard class="card-wrapper xl:flex-1-hidden" body-class="business-table-card-body">
+        <template #header>
+          <div class="project-card-header">
+            <div class="min-w-0 flex-1">
+              <div class="flex flex-wrap items-center gap-8px">
+                <p class="truncate text-16px font-600">项目列表</p>
+                <ElTag effect="plain" :type="getProjectStatusTagType(selectedStatus)">
+                  {{
+                    statusOptions.find(item => item.value === selectedStatus)?.label ||
+                    getProjectStatusLabel(selectedStatus)
+                  }}
+                </ElTag>
+                <ElTag effect="plain">{{ mobilePagination.total || data.length }}</ElTag>
+              </div>
+            </div>
+            <TableHeaderOperation
+              v-model:columns="columnChecks"
+              :disabled-delete="true"
+              :loading="loading"
+              @refresh="refreshPageData"
+            >
+              <template #default>
+                <ElButton plain type="primary" @click="openCreate">
+                  <template #icon>
+                    <icon-ic-round-plus class="text-icon" />
+                  </template>
+                  新建
+                </ElButton>
+              </template>
+            </TableHeaderOperation>
+          </div>
+        </template>
+
+        <div class="flex-1">
+          <ElTable v-loading="loading" height="100%" border row-key="id" :data="data">
+            <ElTableColumn v-for="col in columns" :key="String(col.prop)" v-bind="col" />
+
+            <template #empty>
+              <ElEmpty description="当前筛选条件下暂无项目" />
+            </template>
+          </ElTable>
+        </div>
+        <div class="mt-20px flex justify-end">
+          <ElPagination
+            v-if="mobilePagination.total"
+            layout="total,prev,pager,next,sizes"
+            v-bind="mobilePagination"
+            @current-change="mobilePagination['current-change']"
+            @size-change="mobilePagination['size-change']"
+          />
+        </div>
+      </ElCard>
+    </div>
+
+    <ProjectOperateDialog
+      v-model:visible="operateVisible"
+      :manager-user-options="managerUserOptions"
+      :row-data="editingRow"
+      @submitted="handleProjectSubmitted"
+    />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.project-card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.project-name-link {
+  padding: 0;
+}
+
+@media (width <= 1280px) {
+  .project-card-header {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+}
+</style>

src/views/project/list/modules/project-operate-dialog.vue

@@ -0,0 +1,511 @@
+<script setup lang="tsx">
+import { computed, nextTick, ref, watch } from 'vue';
+import { ElCol, ElDatePicker, ElFormItem, ElInput, ElOption, ElRow, ElSelect } from 'element-plus';
+import dayjs from 'dayjs';
+import { RDMS_OBJECT_DIRECTION_DICT_CODE, RDMS_PROJECT_TYPE_DICT_CODE } from '@/constants/dict';
+import { fetchCreateProject, fetchGetProductPage, fetchUpdateProject } from '@/service/api';
+import { useDict } from '@/hooks/business/dict';
+import { useForm, useFormRules } from '@/hooks/common/form';
+import BusinessFormDialog from '@/components/custom/business-form-dialog.vue';
+import BusinessFormSection from '@/components/custom/business-form-section.vue';
+import BusinessUserSelect from '@/components/custom/business-user-select.vue';
+import DictSelect from '@/components/custom/dict-select.vue';
+
+defineOptions({ name: 'ProjectOperateDialog' });
+
+interface Props {
+  managerUserOptions: Api.SystemManage.UserSimple[];
+  rowData?: Api.Project.Project | null;
+}
+
+const props = defineProps<Props>();
+
+interface Emits {
+  (e: 'submitted', projectId?: string): void;
+}
+
+const emit = defineEmits<Emits>();
+
+const visible = defineModel<boolean>('visible', {
+  default: false
+});
+
+interface Model {
+  projectCode: string;
+  projectName: string;
+  directionCode: string;
+  projectType: string;
+  productId: string | null;
+  managerUserId: string | null;
+  plannedStartDate: string | null;
+  plannedEndDate: string | null;
+  projectDesc: string;
+}
+
+const { formRef, validate } = useForm();
+const { createRequiredRule } = useFormRules();
+const { getLabel: getDirectionLabel } = useDict(RDMS_OBJECT_DIRECTION_DICT_CODE);
+
+const isEditMode = computed(() => Boolean(props.rowData?.id));
+const dialogTitle = computed(() => (isEditMode.value ? '编辑项目' : '新增项目'));
+const submitting = ref(false);
+const loading = ref(false);
+const model = ref<Model>(createDefaultModel());
+
+// 产品选项，包含 ID、名称、方向
+interface ProductOption {
+  id: string;
+  name: string;
+  directionCode: string;
+}
+
+const productOptions = ref<ProductOption[]>([]);
+
+const managerLabelMap = computed(() => new Map(props.managerUserOptions.map(item => [String(item.id), item.nickname])));
+const managerDisplayName = computed(() => {
+  const managerUserId = model.value.managerUserId;
+  if (!managerUserId) {
+    return '';
+  }
+  return managerLabelMap.value.get(String(managerUserId)) || String(managerUserId);
+});
+
+// 当前选中产品的方向
+const selectedProductDirection = computed(() => {
+  if (!model.value.productId) {
+    return '';
+  }
+  const product = productOptions.value.find(p => p.id === model.value.productId);
+  return product?.directionCode || '';
+});
+
+// 判断是否关联了产品（创建/编辑模式都适用）
+const hasAssociatedProduct = computed(() => Boolean(model.value.productId));
+
+// 方向字段是否只读：关联了产品时只读，未关联时可编辑
+const directionReadonly = computed(() => hasAssociatedProduct.value);
+
+// 当前生效的方向：关联产品则用产品方向，否则用用户选择的方向
+const effectiveDirectionCode = computed({
+  get: () => {
+    if (hasAssociatedProduct.value) {
+      // 编辑/创建模式下，关联产品时使用产品方向
+      return selectedProductDirection.value || model.value.directionCode;
+    }
+    return model.value.directionCode;
+  },
+  set: (val: string) => {
+    if (!hasAssociatedProduct.value) {
+      model.value.directionCode = val;
+    }
+  }
+});
+
+const directionDisplayName = computed(() => {
+  const directionCode = effectiveDirectionCode.value;
+
+  if (!directionCode) {
+    return '';
+  }
+
+  return getDirectionLabel(directionCode, directionCode);
+});
+
+function parsePlannedDate(value: string | null | undefined) {
+  if (!value) {
+    return null;
+  }
+
+  const date = new Date(value);
+  return Number.isNaN(date.getTime()) ? null : date;
+}
+
+function isPlannedDateRangeValid(startDate: string | null, endDate: string | null) {
+  if (!startDate || !endDate) {
+    return true;
+  }
+
+  return !dayjs(endDate).isBefore(dayjs(startDate), 'day');
+}
+
+function buildEndDateShortcut(text: string, mutator: (date: Date) => void) {
+  return {
+    text,
+    value: () => {
+      let startDate = parsePlannedDate(model.value.plannedStartDate);
+
+      if (!startDate) {
+        startDate = new Date();
+        model.value.plannedStartDate = dayjs(startDate).format('YYYY-MM-DD');
+        window.$message?.info('未选择计划开始日期，已按今日为基准计算');
+        nextTick(() => formRef.value?.clearValidate('plannedStartDate'));
+      }
+
+      const endDate = new Date(startDate.getTime());
+      mutator(endDate);
+      return endDate;
+    }
+  };
+}
+
+const plannedEndDateShortcuts = [
+  buildEndDateShortcut('一星期', date => date.setDate(date.getDate() + 7)),
+  buildEndDateShortcut('两星期', date => date.setDate(date.getDate() + 14)),
+  buildEndDateShortcut('一个月', date => date.setMonth(date.getMonth() + 1)),
+  buildEndDateShortcut('三个月', date => date.setMonth(date.getMonth() + 3)),
+  buildEndDateShortcut('半年', date => date.setMonth(date.getMonth() + 6)),
+  buildEndDateShortcut('一年', date => date.setFullYear(date.getFullYear() + 1))
+];
+
+// 产品下拉的标签，显示产品名称 + 方向
+const productOptionLabel = (item: ProductOption) => {
+  return `${item.name}`;
+};
+
+const rules = {
+  projectName: [createRequiredRule('请输入项目名称')],
+  directionCode: [createRequiredRule('请选择项目方向')],
+  projectType: [createRequiredRule('请选择项目类型')],
+  plannedStartDate: [createRequiredRule('请选择计划开始日期')],
+  plannedEndDate: [
+    createRequiredRule('请选择计划结束日期'),
+    {
+      validator: (_rule, value: string | null, callback) => {
+        if (!isPlannedDateRangeValid(model.value.plannedStartDate, value)) {
+          callback(new Error('计划结束日期不能早于计划开始日期'));
+          return;
+        }
+
+        callback();
+      },
+      trigger: 'change'
+    }
+  ]
+} satisfies Record<string, App.Global.FormRule[]>;
+
+function createDefaultModel(): Model {
+  return {
+    projectCode: '',
+    projectName: '',
+    directionCode: '',
+    projectType: '',
+    productId: null,
+    managerUserId: null,
+    plannedStartDate: null,
+    plannedEndDate: null,
+    projectDesc: ''
+  };
+}
+
+function getNullableText(value?: string | null) {
+  return value?.trim() || null;
+}
+
+function closeDialog() {
+  visible.value = false;
+}
+
+async function loadProductOptions() {
+  const { error, data } = await fetchGetProductPage({ pageNo: 1, pageSize: 200 });
+
+  if (error || !data) {
+    productOptions.value = [];
+    return;
+  }
+
+  productOptions.value = data.list.map(item => ({
+    id: item.id,
+    name: item.name || item.code || item.id,
+    directionCode: item.directionCode || ''
+  }));
+}
+
+// 监听产品选择变化，联动方向（创建模式）
+watch(
+  () => model.value.productId,
+  (newProductId, oldProductId) => {
+    if (isEditMode.value) {
+      return; // 编辑模式下不处理，产品字段只读
+    }
+
+    if (newProductId && newProductId !== oldProductId) {
+      // 选择了产品，自动填充方向
+      const product = productOptions.value.find(p => p.id === newProductId);
+      if (product) {
+        model.value.directionCode = product.directionCode;
+      }
+    }
+    // 取消选择产品时，directionCode 保留，用户可重新选择
+  }
+);
+
+async function handleSubmit() {
+  await validate();
+
+  // 提交时，如果关联了产品，使用产品方向
+  const finalDirectionCode = hasAssociatedProduct.value
+    ? selectedProductDirection.value || model.value.directionCode
+    : model.value.directionCode;
+
+  const payload: Api.Project.SaveProjectParams = {
+    projectCode: getNullableText(model.value.projectCode),
+    projectName: model.value.projectName.trim(),
+    directionCode: finalDirectionCode,
+    projectType: model.value.projectType,
+    productId: model.value.productId,
+    managerUserId: model.value.managerUserId || '',
+    plannedStartDate: model.value.plannedStartDate,
+    plannedEndDate: model.value.plannedEndDate,
+    actualStartDate: isEditMode.value ? props.rowData?.actualStartDate || null : undefined,
+    actualEndDate: isEditMode.value ? props.rowData?.actualEndDate || null : undefined,
+    projectDesc: getNullableText(model.value.projectDesc)
+  };
+
+  submitting.value = true;
+
+  if (isEditMode.value && props.rowData?.id) {
+    const updateParams: Api.Project.UpdateProjectParams = {
+      id: props.rowData.id,
+      ...payload
+    };
+
+    const result = await fetchUpdateProject(updateParams);
+
+    submitting.value = false;
+
+    if (result.error) {
+      return;
+    }
+
+    window.$message?.success('项目编辑成功');
+    closeDialog();
+    emit('submitted', props.rowData.id);
+    return;
+  }
+
+  const result = await fetchCreateProject(payload);
+
+  submitting.value = false;
+
+  if (result.error) {
+    return;
+  }
+
+  window.$message?.success('项目新增成功');
+  closeDialog();
+  emit('submitted', result.data);
+}
+
+watch(visible, async value => {
+  if (!value) {
+    return;
+  }
+
+  await loadProductOptions();
+
+  if (!isEditMode.value || !props.rowData?.id) {
+    model.value = createDefaultModel();
+    await nextTick();
+    formRef.value?.clearValidate();
+    return;
+  }
+
+  model.value = {
+    projectCode: props.rowData.projectCode || '',
+    projectName: props.rowData.projectName || '',
+    directionCode: props.rowData.directionCode || '',
+    projectType: props.rowData.projectType || '',
+    productId: props.rowData.productId,
+    managerUserId: props.rowData.managerUserId || null,
+    plannedStartDate: props.rowData.plannedStartDate,
+    plannedEndDate: props.rowData.plannedEndDate,
+    projectDesc: props.rowData.projectDesc || ''
+  };
+
+  await nextTick();
+  formRef.value?.clearValidate();
+});
+</script>
+
+<template>
+  <BusinessFormDialog
+    v-model="visible"
+    :title="dialogTitle"
+    preset="md"
+    :loading="loading"
+    :confirm-loading="submitting"
+    @confirm="handleSubmit"
+  >
+    <ElForm ref="formRef" :model="model" :rules="rules" label-position="top">
+      <BusinessFormSection title="项目信息">
+        <ElRow :gutter="16">
+          <ElCol :span="12">
+            <ElFormItem v-if="isEditMode" label="项目编码" prop="projectCode">
+              <ElInput
+                :model-value="model.projectCode"
+                readonly
+                class="project-operate-dialog__readonly-input"
+                placeholder="未获取到项目编码"
+              />
+            </ElFormItem>
+            <ElFormItem v-else label="项目编码" prop="projectCode">
+              <ElInput v-model="model.projectCode" clearable placeholder="不填则由后端自动生成" />
+            </ElFormItem>
+          </ElCol>
+          <ElCol :span="12">
+            <ElFormItem label="项目名称" prop="projectName">
+              <ElInput v-model="model.projectName" clearable maxlength="128" placeholder="请输入项目名称" />
+            </ElFormItem>
+          </ElCol>
+          <ElCol :span="12">
+            <ElFormItem label="项目方向" prop="directionCode">
+              <DictSelect
+                v-if="!directionReadonly"
+                v-model="effectiveDirectionCode"
+                :dict-code="RDMS_OBJECT_DIRECTION_DICT_CODE"
+                filterable
+                placeholder="请选择项目方向"
+              />
+              <ElInput
+                v-else
+                :model-value="directionDisplayName"
+                readonly
+                class="project-operate-dialog__readonly-input"
+                placeholder="未获取到项目方向"
+              />
+            </ElFormItem>
+          </ElCol>
+          <ElCol :span="12">
+            <ElFormItem label="项目类型" prop="projectType">
+              <DictSelect
+                v-model="model.projectType"
+                :dict-code="RDMS_PROJECT_TYPE_DICT_CODE"
+                filterable
+                placeholder="请选择项目类型"
+              />
+            </ElFormItem>
+          </ElCol>
+          <ElCol :span="12">
+            <ElFormItem v-if="isEditMode" label="所属产品">
+              <ElInput
+                :model-value="
+                  productOptions.find(p => p.id === model.productId)?.name ||
+                  props.rowData?.productName ||
+                  model.productId ||
+                  '未关联产品'
+                "
+                readonly
+                class="project-operate-dialog__readonly-input"
+                placeholder="未关联产品"
+              />
+            </ElFormItem>
+            <ElFormItem v-else label="所属产品" prop="productId">
+              <ElSelect
+                v-model="model.productId"
+                clearable
+                filterable
+                placeholder="选择所属产品（可选），选择后将锁定项目方向"
+              >
+                <ElOption
+                  v-for="item in productOptions"
+                  :key="item.id"
+                  :label="productOptionLabel(item)"
+                  :value="item.id"
+                />
+              </ElSelect>
+            </ElFormItem>
+          </ElCol>
+          <ElCol :span="12">
+            <ElFormItem v-if="isEditMode">
+              <template #label>
+                <span class="business-form-label-with-tip">
+                  <ElTooltip
+                    content="如需调整项目经理，请到项目内的团队管理处处理。"
+                    popper-class="business-form-label-tooltip"
+                    placement="top-start"
+                  >
+                    <span class="business-form-label-tip">
+                      <icon-fe:question />
+                    </span>
+                  </ElTooltip>
+                  <span>项目经理</span>
+                </span>
+              </template>
+              <ElInput
+                :model-value="managerDisplayName"
+                readonly
+                class="project-operate-dialog__readonly-input"
+                placeholder="未获取到项目经理"
+              />
+            </ElFormItem>
+            <ElFormItem v-else label="项目经理" prop="managerUserId">
+              <BusinessUserSelect
+                v-model="model.managerUserId"
+                :options="managerUserOptions"
+                placeholder="请选择项目经理"
+              />
+            </ElFormItem>
+          </ElCol>
+          <ElCol :span="12">
+            <ElFormItem label="计划开始日期" prop="plannedStartDate">
+              <ElDatePicker
+                v-model="model.plannedStartDate"
+                type="date"
+                value-format="YYYY-MM-DD"
+                placeholder="选择开始日期"
+                class="project-operate-dialog__date-picker"
+              />
+            </ElFormItem>
+          </ElCol>
+          <ElCol :span="12">
+            <ElFormItem label="计划结束日期" prop="plannedEndDate">
+              <ElDatePicker
+                v-model="model.plannedEndDate"
+                type="date"
+                value-format="YYYY-MM-DD"
+                placeholder="选择结束日期"
+                :shortcuts="plannedEndDateShortcuts"
+                class="project-operate-dialog__date-picker"
+              />
+            </ElFormItem>
+          </ElCol>
+          <ElCol :span="24">
+            <ElFormItem label="项目说明" prop="projectDesc">
+              <ElInput
+                v-model="model.projectDesc"
+                type="textarea"
+                :rows="4"
+                maxlength="500"
+                show-word-limit
+                placeholder="请输入项目说明"
+              />
+            </ElFormItem>
+          </ElCol>
+        </ElRow>
+      </BusinessFormSection>
+    </ElForm>
+  </BusinessFormDialog>
+</template>
+
+<style scoped>
+:deep(.project-operate-dialog__readonly-input .el-input__wrapper) {
+  background: linear-gradient(180deg, rgb(241 245 249 / 98%), rgb(226 232 240 / 94%)), rgb(241 245 249);
+  box-shadow: 0 0 0 1px rgb(203 213 225 / 96%) inset;
+  cursor: default;
+}
+
+:deep(.project-operate-dialog__readonly-input .el-input__wrapper:hover),
+:deep(.project-operate-dialog__readonly-input.is-focus .el-input__wrapper) {
+  box-shadow: 0 0 0 1px rgb(203 213 225 / 96%) inset;
+}
+
+:deep(.project-operate-dialog__readonly-input .el-input__inner) {
+  color: rgb(51 65 85 / 96%);
+  cursor: default;
+  -webkit-text-fill-color: rgb(51 65 85 / 96%);
+}
+
+:deep(.project-operate-dialog__date-picker.el-date-editor.el-input) {
+  width: 100%;
+}
+</style>

src/views/project/list/modules/project-overview-card.vue

@@ -0,0 +1,302 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { Component } from 'vue';
+import { CircleCheckFilled, DeleteFilled, DocumentAdd, FolderOpened, VideoPause } from '@element-plus/icons-vue';
+
+defineOptions({ name: 'ProjectOverviewCard' });
+
+interface StatusNavMeta {
+  key: Api.Project.ProjectStatusCode;
+  label: string;
+  description: string;
+  tone: 'teal' | 'slate' | 'amber' | 'rose' | 'indigo';
+  icon: Component;
+}
+
+interface Props {
+  statusCounts: Record<string, number>;
+  directionCount: number;
+  selectedStatus: Api.Project.ProjectStatusCode;
+}
+
+const props = defineProps<Props>();
+
+interface Emits {
+  (e: 'status-change', status: Api.Project.ProjectStatusCode): void;
+}
+
+const emit = defineEmits<Emits>();
+
+const statusNavMetas: StatusNavMeta[] = [
+  {
+    key: 'pending',
+    label: '待开始',
+    description: '项目已创建，等待启动',
+    tone: 'indigo',
+    icon: DocumentAdd
+  },
+  {
+    key: 'active',
+    label: '进行中',
+    description: '正在执行的项目',
+    tone: 'teal',
+    icon: CircleCheckFilled
+  },
+  {
+    key: 'paused',
+    label: '已暂停',
+    description: '暂时停止推进的项目',
+    tone: 'amber',
+    icon: VideoPause
+  },
+  {
+    key: 'completed',
+    label: '已完成',
+    description: '达成目标的项目',
+    tone: 'teal',
+    icon: FolderOpened
+  },
+  {
+    key: 'cancelled',
+    label: '作废项目',
+    description: '已终止或取消推进的项目',
+    tone: 'rose',
+    icon: DeleteFilled
+  },
+  {
+    key: 'archived',
+    label: '归档项目',
+    description: '已收口归档的历史项目',
+    tone: 'slate',
+    icon: FolderOpened
+  }
+];
+
+const statusItems = computed(() =>
+  statusNavMetas.map(item => ({
+    ...item,
+    count: props.statusCounts[item.key] ?? 0
+  }))
+);
+
+const overviewMetrics = computed(() => [
+  {
+    label: '总项目数',
+    value: Object.values(props.statusCounts).reduce((sum, count) => sum + count, 0),
+    hint: '当前接口可查询到的项目总量'
+  },
+  {
+    label: '进行中',
+    value: props.statusCounts.active ?? 0,
+    hint: '正在执行的项目'
+  },
+  {
+    label: '待开始',
+    value: props.statusCounts.pending ?? 0,
+    hint: '等待启动的项目'
+  },
+  {
+    label: '作废项目',
+    value: props.statusCounts.cancelled ?? 0,
+    hint: '已终止或取消推进的项目'
+  }
+]);
+
+function handleStatusClick(status: Api.Project.ProjectStatusCode) {
+  emit('status-change', status);
+}
+</script>
+
+<template>
+  <ElCard class="project-overview-card card-wrapper">
+    <div class="project-overview-card__stats">
+      <div v-for="item in overviewMetrics" :key="item.label" class="project-overview-card__stat">
+        <span class="project-overview-card__stat-label">{{ item.label }}</span>
+        <strong class="project-overview-card__stat-value">{{ item.value }}</strong>
+        <small class="project-overview-card__stat-hint">{{ item.hint }}</small>
+      </div>
+    </div>
+
+    <div class="project-status-panel__list">
+      <button
+        v-for="item in statusItems"
+        :key="item.key"
+        type="button"
+        class="project-status-item"
+        :class="[`project-status-item--${item.tone}`, { 'is-active': selectedStatus === item.key }]"
+        :aria-pressed="selectedStatus === item.key"
+        @click="handleStatusClick(item.key)"
+      >
+        <div class="project-status-item__icon">
+          <ElIcon>
+            <component :is="item.icon" />
+          </ElIcon>
+        </div>
+        <div class="project-status-item__main">
+          <div class="project-status-item__top">
+            <strong>{{ item.label }}</strong>
+            <em>{{ item.count }}</em>
+          </div>
+          <p class="project-status-item__desc">{{ item.description }}</p>
+        </div>
+      </button>
+    </div>
+  </ElCard>
+</template>
+
+<style lang="scss" scoped>
+.project-overview-card {
+  overflow: hidden;
+  border: 1px solid rgb(226 232 240 / 92%);
+  background:
+    radial-gradient(circle at top left, rgb(14 165 233 / 8%), transparent 36%),
+    linear-gradient(180deg, rgb(255 255 255 / 99%), rgb(248 250 252 / 97%));
+}
+
+.project-overview-card__stats {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.project-overview-card__stat {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 14px 16px;
+  border: 1px solid rgb(226 232 240 / 88%);
+  border-radius: 18px;
+  background-color: rgb(255 255 255 / 84%);
+}
+
+.project-overview-card__stat-label {
+  color: rgb(100 116 139 / 90%);
+  font-size: 13px;
+}
+
+.project-overview-card__stat-value {
+  color: rgb(15 23 42 / 94%);
+  font-size: 24px;
+  font-weight: 700;
+  line-height: 1.1;
+}
+
+.project-overview-card__stat-hint {
+  color: rgb(100 116 139 / 90%);
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+.project-status-panel__list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin-top: 16px;
+}
+
+.project-status-item {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  width: 100%;
+  padding: 14px;
+  border: 1px solid rgb(226 232 240 / 90%);
+  border-radius: 18px;
+  background-color: rgb(255 255 255 / 86%);
+  text-align: left;
+  transition:
+    transform 0.2s ease,
+    border-color 0.2s ease,
+    box-shadow 0.2s ease;
+}
+
+.project-status-item:hover {
+  transform: translateY(-1px);
+  border-color: rgb(148 163 184 / 60%);
+}
+
+.project-status-item.is-active {
+  border-color: rgb(14 165 233 / 40%);
+  box-shadow: 0 10px 24px rgb(14 165 233 / 8%);
+}
+
+.project-status-item__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  border-radius: 14px;
+  font-size: 20px;
+}
+
+.project-status-item__main {
+  min-width: 0;
+  flex: 1;
+}
+
+.project-status-item__top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 6px;
+}
+
+.project-status-item__top strong {
+  color: rgb(15 23 42 / 94%);
+  font-size: 15px;
+  font-weight: 700;
+}
+
+.project-status-item__top em {
+  color: rgb(15 23 42 / 88%);
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 700;
+}
+
+.project-status-item__desc {
+  color: rgb(100 116 139 / 94%);
+  font-size: 13px;
+  line-height: 1.6;
+}
+
+.project-status-item--teal .project-status-item__icon {
+  background-color: rgb(240 253 250 / 96%);
+  color: rgb(15 118 110 / 96%);
+}
+
+.project-status-item--slate .project-status-item__icon {
+  background-color: rgb(241 245 249 / 96%);
+  color: rgb(51 65 85 / 92%);
+}
+
+.project-status-item--amber .project-status-item__icon {
+  background-color: rgb(255 251 235 / 96%);
+  color: rgb(217 119 6 / 92%);
+}
+
+.project-status-item--rose .project-status-item__icon {
+  background-color: rgb(255 241 242 / 96%);
+  color: rgb(225 29 72 / 92%);
+}
+
+.project-status-item--indigo .project-status-item__icon {
+  background-color: rgb(238 242 255 / 96%);
+  color: rgb(79 70 229 / 92%);
+}
+
+@media (width <= 1280px) {
+  .project-status-item__top {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+}
+
+@media (width <= 640px) {
+  .project-overview-card__stats {
+    grid-template-columns: 1fr;
+  }
+}
+</style>

src/views/project/list/modules/project-search.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { RDMS_OBJECT_DIRECTION_DICT_CODE, RDMS_PROJECT_TYPE_DICT_CODE } from '@/constants/dict';
+import TableSearchFields, { type SearchField } from '@/components/custom/table-search-fields.vue';
+
+defineOptions({ name: 'ProjectSearch' });
+
+interface Props {
+  managerOptions: Api.SystemManage.UserSimple[];
+}
+
+const props = defineProps<Props>();
+
+interface Emits {
+  (e: 'reset'): void;
+  (e: 'search'): void;
+}
+
+const emit = defineEmits<Emits>();
+
+const model = defineModel<Api.Project.ProjectSearchParams>('model', { required: true });
+
+const fields = computed<SearchField[]>(() => [
+  {
+    key: 'keyword',
+    label: '关键词',
+    type: 'input',
+    placeholder: '项目编码 / 名称'
+  },
+  {
+    key: 'directionCode',
+    label: '项目方向',
+    type: 'dict',
+    dictCode: RDMS_OBJECT_DIRECTION_DICT_CODE,
+    placeholder: '筛选项目方向'
+  },
+  {
+    key: 'projectType',
+    label: '项目类型',
+    type: 'dict',
+    dictCode: RDMS_PROJECT_TYPE_DICT_CODE,
+    placeholder: '筛选项目类型'
+  },
+  {
+    key: 'managerUserId',
+    label: '项目经理',
+    type: 'select',
+    options: props.managerOptions.map(item => ({
+      label: item.nickname,
+      value: item.id
+    })),
+    placeholder: '筛选项目经理'
+  }
+]);
+
+function reset() {
+  emit('reset');
+}
+
+function search() {
+  emit('search');
+}
+</script>
+
+<template>
+  <TableSearchFields v-model="model" :fields="fields" :columns="3" @reset="reset" @search="search" />
+</template>
+
+<style scoped></style>

src/views/project/project/execution/index.vue

@@ -0,0 +1,475 @@
+<script setup lang="ts">
+import { computed, reactive, ref, watch } from 'vue';
+import {
+  fetchChangeProjectExecutionOwner,
+  fetchChangeProjectExecutionStatus,
+  fetchCreateProjectExecution,
+  fetchCreateProjectExecutionMember,
+  fetchGetProjectExecution,
+  fetchGetProjectExecutionMembers,
+  fetchGetProjectExecutionPage,
+  fetchGetProjectExecutionStatusBoard,
+  fetchGetProjectMembers,
+  fetchInactiveProjectExecutionMember,
+  fetchUpdateProjectExecution
+} from '@/service/api';
+import { useObjectContextStore } from '@/store/modules/object-context';
+import { useUIPaginatedTable } from '@/hooks/common/table';
+import { useCurrentProject } from '../../shared/use-current-project';
+import ExecutionListPanel from './modules/execution-list-panel.vue';
+import ExecutionMemberDialog from './modules/execution-member-dialog.vue';
+import ExecutionOperateDialog from './modules/execution-operate-dialog.vue';
+import StatusActionDialog from './modules/status-action-dialog.vue';
+import TaskWorkspace from './modules/task-workspace.vue';
+
+defineOptions({ name: 'ProjectExecution' });
+
+type ExecutionPageResponse = Awaited<ReturnType<typeof fetchGetProjectExecutionPage>>;
+type ExecutionAction = Api.Project.LifecycleAction<Api.Project.ProjectExecutionActionCode>;
+type ExecutionStatusFilter = string | null;
+
+function getInitExecutionSearchParams(): Api.Project.ProjectExecutionSearchParams {
+  return {
+    pageNo: 1,
+    pageSize: 10,
+    keyword: '',
+    executionType: undefined,
+    ownerId: undefined,
+    statusCode: undefined,
+    updateTime: undefined
+  };
+}
+
+function transformExecutionPage(response: ExecutionPageResponse, pageNo: number, pageSize: number) {
+  if (!response.error && response.data) {
+    return {
+      data: response.data.list,
+      pageNum: pageNo,
+      pageSize,
+      total: response.data.total
+    };
+  }
+
+  return {
+    data: [],
+    pageNum: pageNo,
+    pageSize,
+    total: 0
+  };
+}
+
+const { currentObjectId } = useCurrentProject();
+const objectContextStore = useObjectContextStore();
+
+const searchParams = reactive(getInitExecutionSearchParams());
+const DEFAULT_EXECUTION_STATUS: ExecutionStatusFilter = 'active';
+const selectedStatus = ref<ExecutionStatusFilter>(DEFAULT_EXECUTION_STATUS);
+const selectedExecution = ref<Api.Project.ProjectExecution | null>(null);
+const projectMembers = ref<Api.Project.ProjectMember[]>([]);
+const projectMemberOptions = ref<Api.SystemManage.UserSimple[]>([]);
+const operateVisible = ref(false);
+const operateMode = ref<'create' | 'edit' | 'view'>('create');
+const memberVisible = ref(false);
+const statusVisible = ref(false);
+const editingExecution = ref<Api.Project.ProjectExecution | null>(null);
+const editingExecutionMembers = ref<Api.Project.ExecutionMember[]>([]);
+const statusExecution = ref<Api.Project.ProjectExecution | null>(null);
+const statusAction = ref<ExecutionAction | null>(null);
+const executionMembers = ref<Api.Project.ExecutionMember[]>([]);
+const memberLoading = ref(false);
+const executionStatusBoard = ref<Api.Project.StatusBoard | null>(null);
+
+const projectId = computed(() => currentObjectId.value || '');
+
+const statusActionTitle = computed(() =>
+  statusAction.value ? `执行状态变更：${statusAction.value.actionName}` : '执行状态变更'
+);
+const buttonCodeSet = computed(() => new Set(objectContextStore.buttonCodes));
+const canCreateExecution = computed(() => buttonCodeSet.value.has('project:execution:create'));
+const canUpdateExecution = computed(() => buttonCodeSet.value.has('project:execution:update'));
+const canChangeExecutionOwner = computed(() => buttonCodeSet.value.has('project:execution:owner'));
+const canManageExecutionMember = computed(() => buttonCodeSet.value.has('project:execution:member'));
+const canChangeExecutionStatus = computed(() => buttonCodeSet.value.has('project:execution:status'));
+const canDeleteExecution = computed(() => buttonCodeSet.value.has('project:execution:delete'));
+const canCreateTask = computed(() => buttonCodeSet.value.has('project:task:create'));
+const canUpdateTask = computed(() => buttonCodeSet.value.has('project:task:update'));
+const canChangeTaskStatus = computed(() => buttonCodeSet.value.has('project:task:status'));
+
+function createRequestParams(): Api.Project.ProjectExecutionSearchParams {
+  return {
+    ...searchParams,
+    keyword: searchParams.keyword?.trim() || undefined,
+    statusCode: selectedStatus.value || undefined
+  };
+}
+
+function createStatusBoardParams(): Api.Project.ProjectExecutionStatusBoardParams {
+  return {
+    keyword: searchParams.keyword?.trim() || undefined,
+    executionType: searchParams.executionType,
+    ownerId: searchParams.ownerId,
+    updateTime: searchParams.updateTime
+  };
+}
+
+const { data, loading, getDataByPage, mobilePagination } = useUIPaginatedTable<
+  ExecutionPageResponse,
+  Api.Project.ProjectExecution
+>({
+  paginationProps: {
+    currentPage: searchParams.pageNo,
+    pageSize: searchParams.pageSize
+  },
+  api: () => {
+    if (!projectId.value) {
+      return Promise.resolve({
+        data: { total: 0, list: [] },
+        error: null
+      } as unknown as ExecutionPageResponse);
+    }
+
+    return fetchGetProjectExecutionPage(projectId.value, createRequestParams());
+  },
+  transform: response => transformExecutionPage(response, searchParams.pageNo ?? 1, searchParams.pageSize ?? 10),
+  onPaginationParamsChange: params => {
+    searchParams.pageNo = params.currentPage ?? 1;
+    searchParams.pageSize = params.pageSize ?? 10;
+  },
+  columns: () => [{ prop: 'executionName', label: '执行名称', minWidth: 160 }],
+  immediate: false
+});
+
+function syncSelectedExecution() {
+  if (!data.value.length) {
+    selectedExecution.value = null;
+    return;
+  }
+
+  selectedExecution.value = data.value.find(item => item.id === selectedExecution.value?.id) || data.value[0];
+}
+
+async function loadProjectMemberOptions() {
+  if (!projectId.value) {
+    projectMemberOptions.value = [];
+    return;
+  }
+
+  const { error, data: members } = await fetchGetProjectMembers(projectId.value);
+
+  if (error || !members) {
+    projectMembers.value = [];
+    projectMemberOptions.value = [];
+    return;
+  }
+
+  projectMembers.value = members.filter(item => item.status === 0);
+  projectMemberOptions.value = projectMembers.value.map(item => ({
+    id: item.userId,
+    nickname: item.userNickname || item.userId,
+    username: null,
+    deptName: item.roleName || item.roleCode || null
+  }));
+}
+
+async function reloadExecutionData(page = searchParams.pageNo ?? 1) {
+  await getDataByPage(page);
+  syncSelectedExecution();
+}
+
+async function loadExecutionStatusBoard() {
+  if (!projectId.value) {
+    executionStatusBoard.value = null;
+    return;
+  }
+
+  const { error, data: board } = await fetchGetProjectExecutionStatusBoard(projectId.value, createStatusBoardParams());
+
+  executionStatusBoard.value = error || !board ? null : board;
+}
+
+async function refreshPageData() {
+  await Promise.all([loadProjectMemberOptions(), reloadExecutionData(), loadExecutionStatusBoard()]);
+}
+
+async function handleSearch() {
+  await Promise.all([reloadExecutionData(1), loadExecutionStatusBoard()]);
+}
+
+async function handleReset() {
+  Object.assign(searchParams, getInitExecutionSearchParams());
+  selectedStatus.value = DEFAULT_EXECUTION_STATUS;
+  await Promise.all([reloadExecutionData(1), loadExecutionStatusBoard()]);
+}
+
+async function handleStatusChange(status: ExecutionStatusFilter) {
+  selectedStatus.value = status;
+  await reloadExecutionData(1);
+}
+
+async function getExecutionDetail(row: Api.Project.ProjectExecution) {
+  if (!projectId.value) {
+    return row;
+  }
+
+  const result = await fetchGetProjectExecution(projectId.value, row.id);
+
+  return result.error || !result.data ? row : result.data;
+}
+
+function openCreateExecution() {
+  editingExecution.value = null;
+  editingExecutionMembers.value = [];
+  operateMode.value = 'create';
+  operateVisible.value = true;
+}
+
+async function openEditExecution(row: Api.Project.ProjectExecution) {
+  const detail = await getExecutionDetail(row);
+
+  if (!detail.allowEdit) {
+    window.$message?.warning('当前执行状态不允许编辑');
+    return;
+  }
+
+  editingExecution.value = detail;
+  const memberResult = await fetchGetProjectExecutionMembers(projectId.value, detail.id);
+  editingExecutionMembers.value = memberResult.error || !memberResult.data ? [] : memberResult.data;
+  operateMode.value = 'edit';
+  operateVisible.value = true;
+}
+
+async function openViewExecution(row: Api.Project.ProjectExecution) {
+  const detail = await getExecutionDetail(row);
+
+  editingExecution.value = detail;
+  const memberResult = await fetchGetProjectExecutionMembers(projectId.value, detail.id);
+  editingExecutionMembers.value = memberResult.error || !memberResult.data ? [] : memberResult.data;
+  operateMode.value = 'view';
+  operateVisible.value = true;
+}
+
+async function openMemberDialog(row: Api.Project.ProjectExecution) {
+  selectedExecution.value = await getExecutionDetail(row);
+  memberVisible.value = true;
+  await loadExecutionMembers(selectedExecution.value.id);
+}
+
+async function openExecutionStatus(row: Api.Project.ProjectExecution, action: ExecutionAction | null) {
+  const detail = await getExecutionDetail(row);
+  const targetAction = action || detail.availableActions[0] || null;
+
+  if (!targetAction) {
+    window.$message?.warning('当前执行暂无可用状态操作');
+    return;
+  }
+
+  statusExecution.value = detail;
+  statusAction.value = targetAction;
+  statusVisible.value = true;
+}
+
+async function loadExecutionMembers(executionId: string) {
+  if (!projectId.value) {
+    executionMembers.value = [];
+    return;
+  }
+
+  memberLoading.value = true;
+
+  try {
+    const { error, data: members } = await fetchGetProjectExecutionMembers(projectId.value, executionId);
+    executionMembers.value = error || !members ? [] : members;
+  } finally {
+    memberLoading.value = false;
+  }
+}
+
+async function handleExecutionSubmit(payload: Api.Project.SaveProjectExecutionParams) {
+  if (!projectId.value) {
+    return;
+  }
+
+  const result = editingExecution.value
+    ? await fetchUpdateProjectExecution(projectId.value, editingExecution.value.id, payload)
+    : await fetchCreateProjectExecution(projectId.value, payload);
+
+  if (!result.error) {
+    operateVisible.value = false;
+    await Promise.all([
+      reloadExecutionData(editingExecution.value ? (searchParams.pageNo ?? 1) : 1),
+      loadExecutionStatusBoard()
+    ]);
+  }
+}
+
+async function handleChangeOwner(payload: Api.Project.ChangeExecutionOwnerParams) {
+  if (!projectId.value || !selectedExecution.value) {
+    return;
+  }
+
+  const result = await fetchChangeProjectExecutionOwner(projectId.value, selectedExecution.value.id, payload);
+
+  if (!result.error) {
+    selectedExecution.value = await getExecutionDetail(selectedExecution.value);
+    await Promise.all([reloadExecutionData(searchParams.pageNo ?? 1), loadExecutionStatusBoard()]);
+  }
+}
+
+async function handleExecutionStatusSubmit(reason: string | null) {
+  if (!projectId.value || !statusExecution.value || !statusAction.value) {
+    return;
+  }
+
+  const result = await fetchChangeProjectExecutionStatus(projectId.value, statusExecution.value.id, {
+    actionCode: statusAction.value.actionCode,
+    reason
+  });
+
+  if (!result.error) {
+    statusVisible.value = false;
+    await Promise.all([reloadExecutionData(searchParams.pageNo ?? 1), loadExecutionStatusBoard()]);
+  }
+}
+
+async function handleAddExecutionMember(payload: Api.Project.CreateExecutionMemberParams) {
+  if (!projectId.value || !selectedExecution.value) {
+    return;
+  }
+
+  const result = await fetchCreateProjectExecutionMember(projectId.value, selectedExecution.value.id, payload);
+
+  if (!result.error) {
+    await loadExecutionMembers(selectedExecution.value.id);
+  }
+}
+
+async function handleInactiveExecutionMember(
+  member: Api.Project.ExecutionMember,
+  payload: Api.Project.InactiveExecutionMemberParams
+) {
+  if (!projectId.value || !selectedExecution.value) {
+    return;
+  }
+
+  const result = await fetchInactiveProjectExecutionMember(projectId.value, selectedExecution.value.id, {
+    memberId: member.id,
+    data: payload
+  });
+
+  if (!result.error) {
+    await loadExecutionMembers(selectedExecution.value.id);
+  }
+}
+
+function handleDeleteExecution(_row: Api.Project.ProjectExecution) {
+  window.$message?.warning('删除接口暂未开放,请等待后端发布');
+}
+
+watch(
+  () => projectId.value,
+  async () => {
+    selectedExecution.value = null;
+    Object.assign(searchParams, getInitExecutionSearchParams());
+    selectedStatus.value = DEFAULT_EXECUTION_STATUS;
+    await refreshPageData();
+  },
+  { immediate: true }
+);
+</script>
+
+<template>
+  <div v-if="projectId" class="project-execution-page">
+    <ExecutionListPanel
+      v-model:search-model="searchParams"
+      class="project-execution-page__aside"
+      :data="data"
+      :loading="loading"
+      :pagination="mobilePagination"
+      :selected-id="selectedExecution?.id || null"
+      :status-board="executionStatusBoard"
+      :selected-status="selectedStatus"
+      :owner-options="projectMemberOptions"
+      :can-create="canCreateExecution"
+      :can-update="canUpdateExecution"
+      :can-change-owner="canChangeExecutionOwner"
+      :can-manage-member="canManageExecutionMember"
+      :can-change-status="canChangeExecutionStatus"
+      :can-delete="canDeleteExecution"
+      @select="selectedExecution = $event"
+      @status-change="handleStatusChange"
+      @search="handleSearch"
+      @reset="handleReset"
+      @create="openCreateExecution"
+      @edit="openEditExecution"
+      @view="openViewExecution"
+      @members="openMemberDialog"
+      @status-action="openExecutionStatus"
+      @delete="handleDeleteExecution"
+    />
+
+    <TaskWorkspace
+      class="project-execution-page__main"
+      :project-id="projectId"
+      :execution="selectedExecution"
+      :owner-options="projectMemberOptions"
+      :can-create="canCreateTask"
+      :can-update="canUpdateTask"
+      :can-change-status="canChangeTaskStatus"
+    />
+
+    <ExecutionOperateDialog
+      v-model:visible="operateVisible"
+      :mode="operateMode"
+      :row-data="editingExecution"
+      :user-options="projectMemberOptions"
+      :current-members="editingExecutionMembers"
+      @submit="handleExecutionSubmit"
+    />
+
+    <ExecutionMemberDialog
+      v-model:visible="memberVisible"
+      :execution="selectedExecution"
+      :members="executionMembers"
+      :user-options="projectMemberOptions"
+      :loading="memberLoading"
+      :can-manage-member="canManageExecutionMember"
+      :can-change-owner="canChangeExecutionOwner"
+      @add="handleAddExecutionMember"
+      @inactive="handleInactiveExecutionMember"
+      @change-owner="handleChangeOwner"
+    />
+
+    <StatusActionDialog
+      v-model:visible="statusVisible"
+      :title="statusActionTitle"
+      :action="statusAction"
+      @submit="handleExecutionStatusSubmit"
+    />
+  </div>
+
+  <ElEmpty v-else description="未获取到当前项目上下文，请返回项目列表重新选择项目" />
+</template>
+
+<style scoped>
+.project-execution-page {
+  display: grid;
+  min-height: 560px;
+  gap: 16px;
+  overflow: hidden;
+  grid-template-columns: 396px minmax(0, 1fr);
+}
+
+.project-execution-page__aside,
+.project-execution-page__main {
+  min-width: 0;
+  min-height: 0;
+}
+
+@media (width <= 1280px) {
+  .project-execution-page {
+    display: flex;
+    flex-direction: column;
+    overflow: auto;
+  }
+}
+</style>

src/views/project/project/execution/mock.ts

@@ -0,0 +1,49 @@
+import {
+  EXECUTION_STATUS_ORDER,
+  TASK_STATUS_ORDER,
+  executionStatusFallbackNameMap,
+  taskStatusFallbackNameMap
+} from './shared';
+
+export const mockExecutionStatusCounts: Record<Api.Project.ProjectExecutionStatusCode, number> =
+  EXECUTION_STATUS_ORDER.reduce(
+    (counts, statusCode) => ({
+      ...counts,
+      [statusCode]: 0
+    }),
+    {} as Record<Api.Project.ProjectExecutionStatusCode, number>
+  );
+
+export const mockTaskStatusColumns = TASK_STATUS_ORDER.map(statusCode => ({
+  statusCode,
+  statusName: taskStatusFallbackNameMap[statusCode],
+  tasks: [] as Api.Project.ProjectTask[]
+}));
+
+export function createEmptyExecution(projectId: string): Api.Project.ProjectExecution {
+  const now = new Date().toISOString();
+
+  return {
+    id: '',
+    projectId,
+    projectRequirementId: null,
+    executionName: '',
+    executionType: null,
+    ownerId: '',
+    ownerNickname: null,
+    statusCode: 'pending',
+    statusName: executionStatusFallbackNameMap.pending,
+    terminal: false,
+    allowEdit: true,
+    availableActions: [],
+    plannedStartDate: null,
+    plannedEndDate: null,
+    actualStartDate: null,
+    actualEndDate: null,
+    progressRate: 0,
+    executionDesc: null,
+    lastStatusReason: null,
+    createTime: now,
+    updateTime: now
+  };
+}

src/views/project/project/execution/modules/execution-list-panel.vue

@@ -0,0 +1,605 @@
+<script setup lang="ts">
+import { computed, markRaw } from 'vue';
+import type { PaginationProps } from 'element-plus';
+import { Calendar, Flag, Plus, TrendCharts, User } from '@element-plus/icons-vue';
+import { formatDateRange, getExecutionStatusName, getExecutionStatusTagType, getProgressText } from '../shared';
+import IconMdiAccountMultipleOutline from '~icons/mdi/account-multiple-outline';
+import IconMdiCloseCircleOutline from '~icons/mdi/close-circle-outline';
+import IconMdiEyeOutline from '~icons/mdi/eye-outline';
+import IconMdiPause from '~icons/mdi/pause';
+import IconMdiPencilOutline from '~icons/mdi/pencil-outline';
+import IconMdiPlay from '~icons/mdi/play';
+import IconMdiRestart from '~icons/mdi/restart';
+import IconMdiSync from '~icons/mdi/sync';
+
+defineOptions({ name: 'ProjectExecutionListPanel' });
+
+type ExecutionStatusFilter = string | null;
+
+interface Props {
+  data: Api.Project.ProjectExecution[];
+  loading: boolean;
+  pagination: Partial<PaginationProps & Record<string, any>>;
+  selectedId: string | null;
+  statusBoard: Api.Project.StatusBoard | null;
+  selectedStatus: ExecutionStatusFilter;
+  ownerOptions: Api.SystemManage.UserSimple[];
+  canCreate: boolean;
+  canUpdate: boolean;
+  canChangeOwner: boolean;
+  canManageMember: boolean;
+  canChangeStatus: boolean;
+  canDelete: boolean;
+}
+
+const props = defineProps<Props>();
+
+interface Emits {
+  (e: 'select', row: Api.Project.ProjectExecution): void;
+  (e: 'status-change', status: ExecutionStatusFilter): void;
+  (e: 'create'): void;
+  (e: 'edit', row: Api.Project.ProjectExecution): void;
+  (e: 'view', row: Api.Project.ProjectExecution): void;
+  (e: 'members', row: Api.Project.ProjectExecution): void;
+  (e: 'delete', row: Api.Project.ProjectExecution): void;
+  (e: 'search'): void;
+  (e: 'reset'): void;
+  (
+    e: 'status-action',
+    row: Api.Project.ProjectExecution,
+    action: Api.Project.LifecycleAction<Api.Project.ProjectExecutionActionCode> | null
+  ): void;
+}
+
+const emit = defineEmits<Emits>();
+
+const searchModel = defineModel<Api.Project.ProjectExecutionSearchParams>('searchModel', { required: true });
+
+function handleSearch() {
+  emit('search');
+}
+
+function handleKeywordInput(value: string) {
+  searchModel.value.keyword = value.trim() || undefined;
+}
+
+function handleKeywordClear() {
+  searchModel.value.keyword = undefined;
+  handleSearch();
+}
+
+function handleOwnerSelect(id: string | null | undefined) {
+  searchModel.value.ownerId = id || undefined;
+  handleSearch();
+}
+
+function handleReset() {
+  emit('reset');
+}
+
+const paginationVisible = computed(() => {
+  const total = Number(props.pagination.total || 0);
+
+  return total > 0;
+});
+
+const totalCount = computed(() => props.statusBoard?.total ?? 0);
+
+const statusItems = computed(() => [
+  {
+    key: null,
+    label: '全部',
+    count: totalCount.value
+  },
+  ...(props.statusBoard?.items ?? []).map(item => ({
+    key: item.statusCode,
+    label: item.statusName,
+    count: item.count
+  }))
+]);
+
+function handleStatusClick(status: ExecutionStatusFilter) {
+  emit('status-change', status);
+}
+
+function handleSelect(row: Api.Project.ProjectExecution) {
+  emit('select', row);
+}
+
+function handlePageChange(page: number) {
+  props.pagination['current-change']?.(page);
+}
+
+function handleSizeChange(pageSize: number) {
+  props.pagination['size-change']?.(pageSize);
+}
+
+interface ExecutionAction {
+  key: string;
+  tooltip: string;
+  icon: object;
+  type: 'primary' | 'success' | 'danger';
+  onClick: () => void;
+}
+
+const STATUS_ACTION_ICON_MAP: Record<string, object> = {
+  start: markRaw(IconMdiPlay),
+  pause: markRaw(IconMdiPause),
+  resume: markRaw(IconMdiRestart),
+  cancel: markRaw(IconMdiCloseCircleOutline)
+};
+
+function createActions(row: Api.Project.ProjectExecution): ExecutionAction[] {
+  const actions: ExecutionAction[] = [];
+  const isCancelled = row.statusCode === 'cancelled';
+
+  if (isCancelled) {
+    actions.push({
+      key: 'view',
+      tooltip: '查看',
+      icon: markRaw(IconMdiEyeOutline),
+      type: 'primary',
+      onClick: () => emit('view', row)
+    });
+    return actions;
+  }
+
+  if (props.canUpdate && !isCancelled) {
+    actions.push({
+      key: 'edit',
+      tooltip: '编辑',
+      icon: markRaw(IconMdiPencilOutline),
+      type: 'primary',
+      onClick: () => emit('edit', row)
+    });
+  }
+
+  if ((props.canManageMember || props.canChangeOwner) && !isCancelled) {
+    actions.push({
+      key: 'members',
+      tooltip: '成员管理',
+      icon: markRaw(IconMdiAccountMultipleOutline),
+      type: 'primary',
+      onClick: () => emit('members', row)
+    });
+  }
+
+  if (!props.canChangeStatus) {
+    return actions;
+  }
+
+  if (!row.availableActions.length) {
+    if (row.statusCode === 'pending') {
+      actions.push({
+        key: 'cancel',
+        tooltip: '取消',
+        icon: markRaw(IconMdiCloseCircleOutline),
+        type: 'danger',
+        onClick: () =>
+          emit('status-action', row, {
+            actionCode: 'cancel',
+            actionName: '取消',
+            needReason: true
+          })
+      });
+    }
+    return actions;
+  }
+
+  row.availableActions.forEach(action => {
+    actions.push({
+      key: action.actionCode,
+      tooltip: action.actionName,
+      icon: markRaw(STATUS_ACTION_ICON_MAP[action.actionCode] ?? IconMdiSync),
+      type: action.actionCode === 'cancel' ? 'danger' : 'success',
+      onClick: () => emit('status-action', row, action)
+    });
+  });
+
+  return actions;
+}
+</script>
+
+<template>
+  <section class="execution-list-panel">
+    <header class="execution-list-panel__header">
+      <h3 class="execution-list-panel__title">执行池</h3>
+      <ElButton v-if="canCreate" type="primary" :icon="Plus" @click="emit('create')">新增</ElButton>
+    </header>
+
+    <div class="execution-list-panel__search">
+      <ElInput
+        :model-value="searchModel.keyword ?? ''"
+        class="execution-search-input"
+        placeholder="搜索执行名称"
+        @update:model-value="handleKeywordInput"
+        @keyup.enter="handleSearch"
+      >
+        <template #suffix>
+          <ElIcon v-if="searchModel.keyword" class="execution-search-input__clear" @click="handleKeywordClear">
+            <icon-mdi-close-circle />
+          </ElIcon>
+        </template>
+      </ElInput>
+
+      <ElSelect
+        :model-value="searchModel.ownerId ?? null"
+        class="execution-owner-select"
+        placeholder="负责人"
+        clearable
+        filterable
+        @change="handleOwnerSelect"
+      >
+        <ElOption v-for="item in ownerOptions" :key="item.id" :label="item.nickname" :value="item.id" />
+      </ElSelect>
+
+      <div class="execution-search__icons">
+        <ElTooltip content="重置" placement="top">
+          <ElButton link class="execution-search-input__btn" @click="handleReset">
+            <icon-mdi-refresh class="text-15px" />
+          </ElButton>
+        </ElTooltip>
+        <ElTooltip content="搜索" placement="top">
+          <ElButton link class="execution-search-input__btn" type="primary" @click="handleSearch">
+            <icon-ic-round-search class="text-15px" />
+          </ElButton>
+        </ElTooltip>
+      </div>
+    </div>
+
+    <div class="execution-status-grid" aria-label="执行状态筛选">
+      <button
+        v-for="item in statusItems"
+        :key="item.key || 'all'"
+        type="button"
+        class="execution-status-grid__item"
+        :class="{ 'is-active': selectedStatus === item.key }"
+        :aria-pressed="selectedStatus === item.key"
+        @click="handleStatusClick(item.key)"
+      >
+        <span>{{ item.label }}</span>
+        <strong>{{ item.count }}</strong>
+      </button>
+    </div>
+
+    <ElScrollbar class="execution-list-panel__scrollbar">
+      <ElSkeleton v-if="loading" :rows="5" animated />
+      <ElEmpty v-else-if="data.length === 0" class="execution-list-panel__empty" description="暂无执行项" />
+      <div v-else class="execution-list-panel__list">
+        <article
+          v-for="row in data"
+          :key="row.id"
+          class="execution-item"
+          :class="{ 'is-active': selectedId === row.id }"
+          @click="handleSelect(row)"
+        >
+          <div class="execution-item__main">
+            <div class="execution-item__top">
+              <strong class="execution-item__name">{{ row.executionName || '未命名执行' }}</strong>
+              <ElTag
+                class="execution-item__status-tag"
+                :type="getExecutionStatusTagType(row.statusCode)"
+                effect="light"
+                size="small"
+              >
+                {{ getExecutionStatusName(row) }}
+              </ElTag>
+            </div>
+
+            <div class="execution-item__meta">
+              <span>
+                <ElIcon><User /></ElIcon>
+                {{ row.ownerNickname || '未设置负责人' }}
+              </span>
+              <span>
+                <ElIcon><Flag /></ElIcon>
+                计划 {{ formatDateRange(row.plannedStartDate, row.plannedEndDate) }}
+              </span>
+              <span>
+                <ElIcon><Calendar /></ElIcon>
+                实际 {{ formatDateRange(row.actualStartDate, row.actualEndDate) }}
+              </span>
+              <span class="execution-item__progress-row">
+                <ElIcon><TrendCharts /></ElIcon>
+                <ElProgress class="execution-item__progress" :percentage="row.progressRate" :stroke-width="6" />
+              </span>
+            </div>
+          </div>
+
+          <div class="execution-item__actions" @click.stop>
+            <ElTooltip v-for="action in createActions(row)" :key="action.key" :content="action.tooltip">
+              <ElButton link :type="action.type" class="execution-action-btn" @click="action.onClick()">
+                <component :is="action.icon" class="text-14px" />
+              </ElButton>
+            </ElTooltip>
+            <ElPopconfirm
+              v-if="canDelete && (row.statusCode === 'pending' || row.statusCode === 'cancelled')"
+              title="确认删除该执行?删除后不可恢复"
+              confirm-button-text="删除"
+              cancel-button-text="取消"
+              confirm-button-type="danger"
+              @confirm="emit('delete', row)"
+            >
+              <template #reference>
+                <span class="inline-flex">
+                  <ElTooltip content="删除">
+                    <ElButton link type="danger" class="execution-action-btn">
+                      <icon-mdi-delete-outline class="text-14px" />
+                    </ElButton>
+                  </ElTooltip>
+                </span>
+              </template>
+            </ElPopconfirm>
+          </div>
+        </article>
+      </div>
+    </ElScrollbar>
+
+    <div v-if="paginationVisible" class="execution-list-panel__pagination">
+      <ElPagination
+        small
+        background
+        layout="total, prev, pager, next"
+        v-bind="pagination"
+        @current-change="handlePageChange"
+        @size-change="handleSizeChange"
+      />
+    </div>
+  </section>
+</template>
+
+<style scoped lang="scss">
+.execution-list-panel {
+  display: flex;
+  min-width: 0;
+  min-height: 0;
+  flex-direction: column;
+  gap: 12px;
+  height: 100%;
+  padding: 12px;
+  border: 1px solid rgb(226 232 240 / 92%);
+  border-radius: 8px;
+  background-color: #fff;
+}
+
+.execution-list-panel__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  min-height: 40px;
+}
+
+.execution-list-panel__title {
+  margin: 0;
+  color: rgb(15 23 42 / 94%);
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 1.4;
+}
+
+.execution-list-panel__search {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.execution-search-input {
+  width: 140px;
+  flex: 0 0 auto;
+}
+
+.execution-search-input__clear {
+  color: rgb(192 196 204);
+  cursor: pointer;
+  transition: color 0.2s ease;
+}
+
+.execution-search-input__clear:hover {
+  color: rgb(144 147 153);
+}
+
+.execution-search__icons {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex: 0 0 auto;
+  margin-left: auto;
+}
+
+.execution-search-input__btn {
+  width: 24px;
+  min-width: 24px;
+  height: 24px;
+  padding: 0;
+}
+
+.execution-owner-select {
+  width: 140px;
+  flex: 0 0 auto;
+}
+
+.execution-search__icons :deep(.el-button + .el-button) {
+  margin-left: 0;
+}
+
+.execution-status-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
+}
+
+.execution-status-grid__item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-width: 0;
+  min-height: 40px;
+  padding: 8px 10px;
+  border: 1px solid rgb(226 232 240 / 92%);
+  border-radius: 6px;
+  background-color: rgb(248 250 252 / 80%);
+  color: rgb(51 65 85 / 96%);
+  cursor: pointer;
+  transition:
+    border-color 0.16s ease,
+    background-color 0.16s ease,
+    color 0.16s ease;
+}
+
+.execution-status-grid__item:hover {
+  border-color: rgb(148 163 184 / 80%);
+  background-color: #fff;
+}
+
+.execution-status-grid__item.is-active {
+  border-color: rgb(64 158 255 / 68%);
+  background-color: rgb(236 245 255 / 92%);
+  color: var(--el-color-primary);
+}
+
+.execution-status-grid__item span {
+  overflow: hidden;
+  min-width: 0;
+  font-size: 13px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.execution-status-grid__item strong {
+  flex: 0 0 auto;
+  font-size: 16px;
+  font-weight: 700;
+}
+
+.execution-list-panel__scrollbar {
+  min-height: 0;
+  flex: 1;
+}
+
+.execution-list-panel__empty {
+  padding: 32px 0;
+}
+
+.execution-list-panel__list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding-right: 4px;
+}
+
+.execution-list-panel__pagination {
+  display: flex;
+  justify-content: flex-end;
+  padding-top: 4px;
+  overflow: hidden;
+}
+
+.execution-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  min-width: 0;
+  padding: 10px;
+  border: 1px solid rgb(226 232 240 / 92%);
+  border-radius: 6px;
+  background-color: #fff;
+  cursor: pointer;
+  transition:
+    border-color 0.16s ease,
+    background-color 0.16s ease;
+}
+
+.execution-item:hover {
+  border-color: rgb(148 163 184 / 76%);
+  background-color: rgb(248 250 252 / 68%);
+}
+
+.execution-item.is-active {
+  border-color: rgb(64 158 255 / 68%);
+  background-color: rgb(236 245 255 / 78%);
+}
+
+.execution-item__main {
+  min-width: 0;
+  flex: 1;
+}
+
+.execution-item__top {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  gap: 8px;
+  min-height: 24px;
+}
+
+.execution-item__status-tag {
+  flex: 0 0 auto;
+}
+
+.execution-item__name {
+  overflow: hidden;
+  min-width: 0;
+  color: rgb(15 23 42 / 94%);
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 1.5;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.execution-item__meta {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  margin-top: 8px;
+  color: rgb(100 116 139 / 94%);
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+.execution-item__meta span {
+  display: inline-flex;
+  align-items: center;
+  min-width: 0;
+  gap: 4px;
+}
+
+.execution-item__progress-row {
+  width: 100%;
+}
+
+.execution-item__progress {
+  flex: 1;
+  min-width: 0;
+}
+
+.execution-item__actions {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex: 0 0 auto;
+}
+
+.execution-item__actions :deep(.el-button + .el-button) {
+  margin-left: 0;
+}
+
+:deep(.execution-action-btn) {
+  padding: 3px;
+  min-width: auto;
+  height: auto;
+  line-height: 1;
+}
+
+@media (width <= 1280px) {
+  .execution-item {
+    flex-direction: column;
+  }
+
+  .execution-item__actions {
+    width: 100%;
+    justify-content: flex-end;
+  }
+}
+</style>

src/views/project/project/execution/modules/execution-member-dialog.vue

@@ -0,0 +1,103 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+import BusinessFormDialog from '@/components/custom/business-form-dialog.vue';
+import MemberCurrentPanel from './member-current-panel.vue';
+import MemberLogPanel from './member-log-panel.vue';
+
+defineOptions({ name: 'ProjectExecutionMemberDialog' });
+
+interface Props {
+  execution: Api.Project.ProjectExecution | null;
+  members: Api.Project.ExecutionMember[];
+  userOptions: Api.SystemManage.UserSimple[];
+  loading: boolean;
+  canManageMember: boolean;
+  canChangeOwner: boolean;
+}
+
+interface Emits {
+  (e: 'add', payload: Api.Project.CreateExecutionMemberParams): void;
+  (e: 'inactive', member: Api.Project.ExecutionMember, payload: Api.Project.InactiveExecutionMemberParams): void;
+  (e: 'change-owner', payload: Api.Project.ChangeExecutionOwnerParams): void;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits<Emits>();
+
+const visible = defineModel<boolean>('visible', {
+  default: false
+});
+
+type TabName = 'current' | 'log';
+
+const activeTab = ref<TabName>('current');
+
+const currentPanelRef = ref<InstanceType<typeof MemberCurrentPanel> | null>(null);
+
+const dialogTitle = computed(() =>
+  props.execution ? `执行成员管理：${props.execution.executionName}` : '执行成员管理'
+);
+
+const projectId = computed(() => props.execution?.projectId || '');
+const executionId = computed(() => props.execution?.id || '');
+
+function handleAdd(payload: Api.Project.CreateExecutionMemberParams) {
+  emit('add', payload);
+}
+
+function handleInactive(member: Api.Project.ExecutionMember, payload: Api.Project.InactiveExecutionMemberParams) {
+  emit('inactive', member, payload);
+}
+
+function handleChangeOwner(payload: Api.Project.ChangeExecutionOwnerParams) {
+  emit('change-owner', payload);
+}
+
+watch(
+  () => visible.value,
+  value => {
+    if (value) {
+      activeTab.value = 'current';
+      return;
+    }
+
+    currentPanelRef.value?.reset();
+  }
+);
+</script>
+
+<template>
+  <BusinessFormDialog v-model="visible" :title="dialogTitle" preset="lg" :show-footer="false" :scrollbar="false">
+    <ElTabs v-model="activeTab" class="execution-member-dialog__tabs">
+      <ElTabPane label="当前成员" name="current">
+        <MemberCurrentPanel
+          ref="currentPanelRef"
+          :execution="execution"
+          :members="members"
+          :user-options="userOptions"
+          :loading="loading"
+          :can-manage-member="canManageMember"
+          :can-change-owner="canChangeOwner"
+          @add="handleAdd"
+          @inactive="handleInactive"
+          @change-owner="handleChangeOwner"
+        />
+      </ElTabPane>
+      <ElTabPane label="变更历史" name="log" lazy>
+        <MemberLogPanel
+          v-if="projectId && executionId"
+          :project-id="projectId"
+          :execution-id="executionId"
+          :user-options="userOptions"
+          :active="activeTab === 'log'"
+        />
+      </ElTabPane>
+    </ElTabs>
+  </BusinessFormDialog>
+</template>
+
+<style scoped lang="scss">
+.execution-member-dialog__tabs {
+  --el-tabs-header-height: 40px;
+}
+</style>

src/views/project/project/execution/modules/execution-operate-dialog.vue

@@ -0,0 +1,548 @@
+<script setup lang="ts">
+import { computed, nextTick, reactive, ref, watch } from 'vue';
+import { useResizeObserver } from '@vueuse/core';
+import dayjs from 'dayjs';
+import { RDMS_PROJECT_EXECUTION_TYPE_DICT_CODE } from '@/constants/dict';
+import { useForm, useFormRules } from '@/hooks/common/form';
+import BusinessFormDialog from '@/components/custom/business-form-dialog.vue';
+import BusinessFormSection from '@/components/custom/business-form-section.vue';
+import BusinessRichTextEditor from '@/components/custom/business-rich-text-editor.vue';
+import BusinessUserSelect from '@/components/custom/business-user-select.vue';
+import DictSelect from '@/components/custom/dict-select.vue';
+import { isActiveExecutionMember } from '../shared';
+
+function isEmptyRichText(html: string | null | undefined) {
+  if (!html) {
+    return true;
+  }
+
+  const text = html
+    .replace(/<[^>]+>/g, '')
+    .replace(/&nbsp;/g, '')
+    .trim();
+  if (text) {
+    return false;
+  }
+
+  return !/<img\b/i.test(html);
+}
+
+defineOptions({ name: 'ProjectExecutionOperateDialog' });
+
+type OperateMode = 'create' | 'edit' | 'view';
+
+interface Props {
+  mode: OperateMode;
+  rowData: Api.Project.ProjectExecution | null;
+  userOptions: Api.SystemManage.UserSimple[];
+  currentMembers?: Api.Project.ExecutionMember[];
+}
+
+interface Emits {
+  (e: 'submit', payload: Api.Project.SaveProjectExecutionParams): void;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits<Emits>();
+
+const activeMembers = computed(() => (props.currentMembers ?? []).filter(member => isActiveExecutionMember(member)));
+
+function resolveUserLabel(userId: string | null | undefined, fallbackNickname?: string | null) {
+  if (!userId) {
+    return '';
+  }
+
+  return fallbackNickname || props.userOptions.find(item => item.id === userId)?.nickname || userId;
+}
+
+function resolveMemberLabel(member: Api.Project.ExecutionMember) {
+  return resolveUserLabel(member.userId, member.userNickname);
+}
+
+const ownerDisplayName = computed(() => resolveUserLabel(props.rowData?.ownerId, props.rowData?.ownerNickname));
+
+const activeMemberIds = computed(() => activeMembers.value.map(member => member.userId));
+
+const visible = defineModel<boolean>('visible', {
+  default: false
+});
+
+const { formRef, validate } = useForm();
+const { createRequiredRule } = useFormRules();
+const autoOwnerMemberId = ref<string | null>(null);
+
+/** 左栏容器 ref：用其高度动态驱动右侧富文本，让两栏视觉等高 */
+const leftColRef = ref<HTMLElement>();
+const editorHeight = ref<string>('45vh');
+
+useResizeObserver(leftColRef, entries => {
+  const h = entries[0]?.contentRect.height;
+  if (h && h > 120) {
+    // 减去 BusinessFormSection 标题（h4）大致高度，让富文本所在 section 与左栏底对齐
+    editorHeight.value = `${Math.max(h - 60, 240)}px`;
+  }
+});
+
+function parsePlannedDate(value: string | null | undefined) {
+  if (!value) {
+    return null;
+  }
+
+  const date = new Date(value);
+  return Number.isNaN(date.getTime()) ? null : date;
+}
+
+function isPlannedDateRangeValid(startDate: string | null, endDate: string | null) {
+  if (!startDate || !endDate) {
+    return true;
+  }
+
+  return !dayjs(endDate).isBefore(dayjs(startDate), 'day');
+}
+
+const model = reactive<Api.Project.SaveProjectExecutionParams>({
+  executionName: '',
+  executionType: '',
+  ownerId: '',
+  projectRequirementId: null,
+  plannedStartDate: null,
+  plannedEndDate: null,
+  executionDesc: null,
+  memberUserIds: []
+});
+
+function buildEndDateShortcut(text: string, mutator: (date: Date) => void) {
+  return {
+    text,
+    value: () => {
+      let startDate = parsePlannedDate(model.plannedStartDate);
+
+      if (!startDate) {
+        startDate = new Date();
+        model.plannedStartDate = dayjs(startDate).format('YYYY-MM-DD');
+        window.$message?.info('未选择计划开始日期，已按今日为基准计算');
+        nextTick(() => formRef.value?.clearValidate('plannedStartDate'));
+      }
+
+      const endDate = new Date(startDate.getTime());
+      mutator(endDate);
+      return endDate;
+    }
+  };
+}
+
+const plannedEndDateShortcuts = [
+  buildEndDateShortcut('一星期', date => date.setDate(date.getDate() + 7)),
+  buildEndDateShortcut('两星期', date => date.setDate(date.getDate() + 14)),
+  buildEndDateShortcut('一个月', date => date.setMonth(date.getMonth() + 1)),
+  buildEndDateShortcut('三个月', date => date.setMonth(date.getMonth() + 3)),
+  buildEndDateShortcut('半年', date => date.setMonth(date.getMonth() + 6)),
+  buildEndDateShortcut('一年', date => date.setFullYear(date.getFullYear() + 1))
+];
+
+const isView = computed(() => props.mode === 'view');
+
+const dialogTitle = computed(() => {
+  if (props.mode === 'create') {
+    return '新建执行';
+  }
+  if (props.mode === 'view') {
+    return props.rowData?.executionName ? `查看执行：${props.rowData.executionName}` : '查看执行';
+  }
+  return props.rowData?.executionName ? `编辑执行：${props.rowData.executionName}` : '编辑执行';
+});
+const rules = computed(
+  () =>
+    ({
+      executionName: [createRequiredRule('请输入执行名称')],
+      executionType: [createRequiredRule('请选择执行类型')],
+      ownerId: [createRequiredRule('请选择执行负责人')],
+      memberUserIds: props.mode === 'create' ? [createRequiredRule('请选择执行成员')] : [],
+      plannedStartDate: [createRequiredRule('请选择计划开始日期')],
+      plannedEndDate: [
+        createRequiredRule('请选择计划结束日期'),
+        {
+          validator: (_rule, value: string | null, callback) => {
+            if (!isPlannedDateRangeValid(model.plannedStartDate, value)) {
+              callback(new Error('计划结束日期不能早于计划开始日期'));
+              return;
+            }
+
+            callback();
+          },
+          trigger: 'change'
+        }
+      ]
+    }) satisfies Record<string, App.Global.FormRule[]>
+);
+
+function normalizeMemberUserIds(memberUserIds?: string[]) {
+  return Array.from(new Set(memberUserIds?.filter(Boolean) ?? []));
+}
+
+function getUserRoleName(item: Api.SystemManage.UserSimple) {
+  return item.deptName || '';
+}
+
+function syncOwnerMember(ownerId: string | null, previousOwnerId: string | null = autoOwnerMemberId.value) {
+  if (props.mode !== 'create') {
+    return;
+  }
+
+  const currentMemberUserIds = normalizeMemberUserIds(model.memberUserIds);
+  const memberUserIds = previousOwnerId
+    ? currentMemberUserIds.filter(userId => userId !== previousOwnerId)
+    : currentMemberUserIds;
+
+  model.memberUserIds = ownerId ? normalizeMemberUserIds([...memberUserIds, ownerId]) : memberUserIds;
+  autoOwnerMemberId.value = ownerId;
+}
+
+function ensureOwnerInMembers() {
+  if (props.mode !== 'create' || !model.ownerId) {
+    return;
+  }
+
+  model.memberUserIds = normalizeMemberUserIds([...(model.memberUserIds || []), model.ownerId]);
+}
+
+async function handleConfirm() {
+  ensureOwnerInMembers();
+  await validate();
+
+  emit('submit', {
+    executionName: model.executionName.trim(),
+    executionType: model.executionType.trim(),
+    ownerId: model.ownerId,
+    projectRequirementId: null,
+    plannedStartDate: model.plannedStartDate,
+    plannedEndDate: model.plannedEndDate,
+    executionDesc: isEmptyRichText(model.executionDesc) ? null : (model.executionDesc ?? null),
+    memberUserIds: props.mode === 'create' ? normalizeMemberUserIds(model.memberUserIds) : undefined
+  });
+}
+
+function handleMemberChange(value: string[]) {
+  if (props.mode !== 'create') {
+    return;
+  }
+
+  model.memberUserIds = normalizeMemberUserIds(model.ownerId ? [...value, model.ownerId] : value);
+}
+
+watch(
+  () => visible.value,
+  async value => {
+    if (!value) {
+      return;
+    }
+
+    model.executionName = props.rowData?.executionName || '';
+    model.executionType = props.rowData?.executionType || '';
+    model.ownerId = props.rowData?.ownerId || '';
+    model.projectRequirementId = null;
+    model.plannedStartDate = props.rowData?.plannedStartDate || null;
+    model.plannedEndDate = props.rowData?.plannedEndDate || null;
+    model.executionDesc = props.rowData?.executionDesc || null;
+    model.memberUserIds = [];
+    autoOwnerMemberId.value = null;
+
+    await nextTick();
+    formRef.value?.clearValidate();
+  }
+);
+
+watch(
+  () => model.ownerId,
+  (ownerId, previousOwnerId) => {
+    syncOwnerMember(ownerId || null, previousOwnerId || null);
+  }
+);
+</script>
+
+<template>
+  <BusinessFormDialog
+    v-model="visible"
+    :title="dialogTitle"
+    width="1100px"
+    max-body-height="78vh"
+    @confirm="handleConfirm"
+  >
+    <template v-if="isView" #footer="{ close }">
+      <ElButton type="primary" @click="close">关闭</ElButton>
+    </template>
+    <ElForm
+      ref="formRef"
+      :model="model"
+      :rules="rules"
+      label-position="top"
+      :validate-on-rule-change="false"
+      class="execution-operate-dialog__form"
+      :class="{ 'is-view': isView }"
+    >
+      <div class="execution-operate-dialog__grid">
+        <div ref="leftColRef" class="execution-operate-dialog__col-left">
+          <BusinessFormSection title="执行信息">
+            <ElFormItem label="执行名称" prop="executionName">
+              <ElInput v-model="model.executionName" :readonly="isView" maxlength="200" placeholder="请输入执行名称" />
+            </ElFormItem>
+
+            <ElFormItem label="执行类型" prop="executionType">
+              <DictSelect
+                v-model="model.executionType"
+                :dict-code="RDMS_PROJECT_EXECUTION_TYPE_DICT_CODE"
+                :disabled="isView"
+                filterable
+                placeholder="请选择执行类型"
+              />
+            </ElFormItem>
+
+            <ElFormItem v-if="mode === 'create'" label="负责人" prop="ownerId">
+              <BusinessUserSelect v-model="model.ownerId" :options="userOptions" placeholder="请选择负责人" />
+            </ElFormItem>
+            <ElFormItem v-else>
+              <template #label>
+                <template v-if="isView">负责人</template>
+                <span v-else class="business-form-label-with-tip">
+                  <ElTooltip
+                    content="如需变更负责人,请关闭此弹层后点击列表「负责人」按钮。"
+                    popper-class="business-form-label-tooltip"
+                    placement="top-start"
+                  >
+                    <span class="business-form-label-tip">
+                      <icon-fe:question />
+                    </span>
+                  </ElTooltip>
+                  <span>负责人</span>
+                </span>
+              </template>
+              <ElInput
+                :model-value="ownerDisplayName"
+                readonly
+                class="execution-operate-dialog__readonly-input"
+                placeholder="未设置负责人"
+              />
+            </ElFormItem>
+
+            <ElFormItem v-if="mode === 'create'" label="执行成员" prop="memberUserIds">
+              <ElSelect
+                v-model="model.memberUserIds"
+                multiple
+                filterable
+                collapse-tags
+                collapse-tags-tooltip
+                :max-collapse-tags="2"
+                class="w-full"
+                placeholder="请选择执行成员"
+                @change="handleMemberChange"
+              >
+                <ElOption
+                  v-for="item in userOptions"
+                  :key="item.id"
+                  :label="item.id === model.ownerId ? `${item.nickname}（负责人）` : item.nickname"
+                  :value="item.id"
+                  :disabled="item.id === model.ownerId"
+                >
+                  <div class="execution-member-option">
+                    <span class="execution-member-option__name">
+                      {{ item.nickname }}
+                      <span v-if="item.id === model.ownerId" class="execution-member-option__owner">负责人</span>
+                    </span>
+                    <span v-if="getUserRoleName(item)" class="execution-member-option__role">
+                      {{ getUserRoleName(item) }}
+                    </span>
+                  </div>
+                </ElOption>
+              </ElSelect>
+            </ElFormItem>
+            <ElFormItem v-else>
+              <template #label>
+                <template v-if="isView">执行成员</template>
+                <span v-else class="business-form-label-with-tip">
+                  <ElTooltip
+                    content="如需调整成员,请关闭此弹层后点击列表「成员」按钮。"
+                    popper-class="business-form-label-tooltip"
+                    placement="top-start"
+                  >
+                    <span class="business-form-label-tip">
+                      <icon-fe:question />
+                    </span>
+                  </ElTooltip>
+                  <span>执行成员</span>
+                </span>
+              </template>
+              <ElSelect
+                :model-value="activeMemberIds"
+                multiple
+                disabled
+                collapse-tags
+                collapse-tags-tooltip
+                :max-collapse-tags="2"
+                class="w-full"
+                placeholder="暂无在岗成员"
+              >
+                <ElOption
+                  v-for="member in activeMembers"
+                  :key="member.id"
+                  :label="resolveMemberLabel(member)"
+                  :value="member.userId"
+                />
+              </ElSelect>
+            </ElFormItem>
+
+            <ElFormItem label="计划开始日期" prop="plannedStartDate">
+              <ElDatePicker
+                v-model="model.plannedStartDate"
+                type="date"
+                value-format="YYYY-MM-DD"
+                placeholder="选择计划开始日期"
+                :disabled="isView"
+                class="execution-operate-dialog__date-picker"
+              />
+            </ElFormItem>
+
+            <ElFormItem label="计划结束日期" prop="plannedEndDate">
+              <ElDatePicker
+                v-model="model.plannedEndDate"
+                type="date"
+                value-format="YYYY-MM-DD"
+                placeholder="选择计划结束日期"
+                :shortcuts="isView ? undefined : plannedEndDateShortcuts"
+                :disabled="isView"
+                class="execution-operate-dialog__date-picker"
+              />
+            </ElFormItem>
+          </BusinessFormSection>
+        </div>
+
+        <div class="execution-operate-dialog__col-right">
+          <BusinessFormSection title="执行说明">
+            <ElFormItem class="execution-operate-dialog__desc-item">
+              <BusinessRichTextEditor
+                v-model="model.executionDesc"
+                :disabled="isView"
+                :height="editorHeight"
+                upload-directory="execution"
+                placeholder="请输入执行说明"
+              />
+            </ElFormItem>
+          </BusinessFormSection>
+        </div>
+      </div>
+    </ElForm>
+  </BusinessFormDialog>
+</template>
+
+<style scoped>
+.execution-operate-dialog__grid {
+  display: grid;
+  grid-template-columns: 360px 1fr;
+  gap: 24px;
+  align-items: start;
+}
+
+.execution-operate-dialog__col-left,
+.execution-operate-dialog__col-right {
+  min-width: 0;
+}
+
+.execution-operate-dialog__col-right {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.execution-operate-dialog__desc-item {
+  margin-bottom: 0;
+}
+
+@media (width <= 1024px) {
+  .execution-operate-dialog__grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+:deep(.execution-operate-dialog__date-picker.el-date-editor.el-input) {
+  width: 100%;
+}
+
+:deep(.execution-operate-dialog__readonly-input .el-input__wrapper) {
+  background: linear-gradient(180deg, rgb(241 245 249 / 98%), rgb(226 232 240 / 94%)), rgb(241 245 249);
+  box-shadow: 0 0 0 1px rgb(203 213 225 / 96%) inset;
+  cursor: default;
+}
+
+:deep(.execution-operate-dialog__readonly-input .el-input__wrapper:hover),
+:deep(.execution-operate-dialog__readonly-input.is-focus .el-input__wrapper) {
+  box-shadow: 0 0 0 1px rgb(203 213 225 / 96%) inset;
+}
+
+:deep(.execution-operate-dialog__readonly-input .el-input__inner) {
+  color: rgb(51 65 85 / 96%);
+  cursor: default;
+  -webkit-text-fill-color: rgb(51 65 85 / 96%);
+}
+
+.execution-operate-dialog__form.is-view :deep(.el-input__wrapper),
+.execution-operate-dialog__form.is-view :deep(.el-select__wrapper),
+.execution-operate-dialog__form.is-view :deep(.el-textarea__inner) {
+  background: linear-gradient(180deg, rgb(241 245 249 / 98%), rgb(226 232 240 / 94%)), rgb(241 245 249);
+  box-shadow: 0 0 0 1px rgb(203 213 225 / 96%) inset;
+  cursor: default;
+}
+
+.execution-operate-dialog__form.is-view :deep(.el-input__wrapper:hover),
+.execution-operate-dialog__form.is-view :deep(.el-input__wrapper.is-focus),
+.execution-operate-dialog__form.is-view :deep(.el-select__wrapper:hover),
+.execution-operate-dialog__form.is-view :deep(.el-select__wrapper.is-focused),
+.execution-operate-dialog__form.is-view :deep(.el-textarea__inner:hover),
+.execution-operate-dialog__form.is-view :deep(.el-textarea__inner:focus) {
+  box-shadow: 0 0 0 1px rgb(203 213 225 / 96%) inset;
+}
+
+.execution-operate-dialog__form.is-view :deep(.el-input__inner),
+.execution-operate-dialog__form.is-view :deep(.el-select__placeholder),
+.execution-operate-dialog__form.is-view :deep(.el-select__selected-item),
+.execution-operate-dialog__form.is-view :deep(.el-textarea__inner) {
+  color: rgb(51 65 85 / 96%);
+  cursor: default;
+  -webkit-text-fill-color: rgb(51 65 85 / 96%);
+}
+
+.execution-member-option {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  min-width: 0;
+}
+
+.execution-member-option__name {
+  display: inline-flex;
+  align-items: center;
+  min-width: 0;
+  gap: 6px;
+  overflow: hidden;
+  color: rgb(15 23 42 / 94%);
+  font-weight: 500;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.execution-member-option__owner {
+  flex: 0 0 auto;
+  color: var(--el-color-primary);
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.execution-member-option__role {
+  flex: 0 0 auto;
+  max-width: 48%;
+  overflow: hidden;
+  color: rgb(100 116 139 / 88%);
+  font-size: 12px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+</style>

src/views/project/project/execution/modules/member-current-panel.vue

@@ -0,0 +1,334 @@
+<script setup lang="ts">
+import { computed, nextTick, reactive, ref, watch } from 'vue';
+import { useForm, useFormRules } from '@/hooks/common/form';
+import BusinessFormDialog from '@/components/custom/business-form-dialog.vue';
+import BusinessTableActionCell, { type BusinessTableAction } from '@/components/custom/business-table-action-cell';
+import BusinessUserSelect from '@/components/custom/business-user-select.vue';
+import { formatDateTime, isActiveExecutionMember } from '../shared';
+
+defineOptions({ name: 'ProjectExecutionMemberCurrentPanel' });
+
+interface Props {
+  execution: Api.Project.ProjectExecution | null;
+  members: Api.Project.ExecutionMember[];
+  userOptions: Api.SystemManage.UserSimple[];
+  loading: boolean;
+  canManageMember: boolean;
+  canChangeOwner: boolean;
+}
+
+interface Emits {
+  (e: 'add', payload: Api.Project.CreateExecutionMemberParams): void;
+  (e: 'inactive', member: Api.Project.ExecutionMember, payload: Api.Project.InactiveExecutionMemberParams): void;
+  (e: 'change-owner', payload: Api.Project.ChangeExecutionOwnerParams): void;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits<Emits>();
+
+const newMemberId = ref('');
+
+const PAGE_SIZE = 5;
+const currentPage = ref(1);
+
+const pagedMembers = computed(() => {
+  const start = (currentPage.value - 1) * PAGE_SIZE;
+  return props.members.slice(start, start + PAGE_SIZE);
+});
+
+watch(
+  () => props.members.length,
+  total => {
+    const maxPage = Math.max(1, Math.ceil(total / PAGE_SIZE));
+    if (currentPage.value > maxPage) {
+      currentPage.value = maxPage;
+    }
+  }
+);
+
+const { createRequiredRule } = useFormRules();
+
+const inactiveTarget = ref<Api.Project.ExecutionMember | null>(null);
+const inactiveModel = reactive({ reason: '' });
+const { formRef: inactiveFormRef, validate: validateInactive } = useForm();
+const inactiveRules = {
+  reason: [createRequiredRule('请输入失效原因')]
+} satisfies Record<string, App.Global.FormRule[]>;
+const inactiveVisible = computed({
+  get: () => Boolean(inactiveTarget.value),
+  set: value => {
+    if (!value) {
+      inactiveTarget.value = null;
+    }
+  }
+});
+
+const ownerTarget = ref<Api.Project.ExecutionMember | null>(null);
+const ownerModel = reactive({ reason: '' });
+const ownerVisible = computed({
+  get: () => Boolean(ownerTarget.value),
+  set: value => {
+    if (!value) {
+      ownerTarget.value = null;
+    }
+  }
+});
+
+const currentOwnerId = computed(() => props.execution?.ownerId || '');
+
+function isOwner(member: Api.Project.ExecutionMember) {
+  return Boolean(currentOwnerId.value) && member.userId === currentOwnerId.value;
+}
+
+function isActiveMember(member: Api.Project.ExecutionMember) {
+  return isActiveExecutionMember(member);
+}
+
+const activeMemberUserIds = computed(() =>
+  props.members.filter(item => isActiveExecutionMember(item)).map(item => item.userId)
+);
+
+const userNicknameMap = computed(() => {
+  const map = new Map<string, string>();
+  props.userOptions.forEach(item => {
+    if (item.id) {
+      map.set(item.id, item.nickname?.trim() || item.id);
+    }
+  });
+  return map;
+});
+
+function getMemberIndex(index: number) {
+  return (currentPage.value - 1) * PAGE_SIZE + index + 1;
+}
+
+function getMemberDisplayName(member: Api.Project.ExecutionMember | null) {
+  if (!member) return '';
+  return member.userNickname?.trim() || userNicknameMap.value.get(member.userId) || member.userId || '--';
+}
+
+function buildMemberActions(row: Api.Project.ExecutionMember): BusinessTableAction[] {
+  const actions: BusinessTableAction[] = [];
+
+  if (props.canChangeOwner) {
+    actions.push({
+      key: 'set-owner',
+      label: '设为负责人',
+      buttonType: 'primary',
+      onClick: () => openOwner(row)
+    });
+  }
+
+  if (props.canManageMember) {
+    actions.push({
+      key: 'inactive',
+      label: '失效',
+      buttonType: 'danger',
+      onClick: () => openInactive(row)
+    });
+  }
+
+  return actions;
+}
+
+function handleAdd() {
+  if (!newMemberId.value) {
+    window.$message?.warning('请选择成员用户');
+    return;
+  }
+
+  emit('add', { userId: newMemberId.value });
+  newMemberId.value = '';
+}
+
+async function openInactive(member: Api.Project.ExecutionMember) {
+  inactiveTarget.value = member;
+  inactiveModel.reason = '';
+  await nextTick();
+  inactiveFormRef.value?.clearValidate();
+}
+
+async function confirmInactive() {
+  await validateInactive();
+
+  if (!inactiveTarget.value) {
+    return;
+  }
+
+  emit('inactive', inactiveTarget.value, { reason: inactiveModel.reason.trim() });
+  inactiveTarget.value = null;
+}
+
+function openOwner(member: Api.Project.ExecutionMember) {
+  ownerTarget.value = member;
+  ownerModel.reason = '';
+}
+
+function confirmOwner() {
+  if (!ownerTarget.value) {
+    return;
+  }
+
+  emit('change-owner', {
+    newOwnerId: ownerTarget.value.userId,
+    reason: ownerModel.reason.trim() || null
+  });
+  ownerTarget.value = null;
+}
+
+function reset() {
+  newMemberId.value = '';
+  inactiveTarget.value = null;
+  inactiveModel.reason = '';
+  ownerTarget.value = null;
+  ownerModel.reason = '';
+  currentPage.value = 1;
+}
+
+defineExpose({ reset });
+</script>
+
+<template>
+  <div v-loading="loading" class="member-current-panel">
+    <div v-if="canManageMember" class="member-current-panel__toolbar">
+      <BusinessUserSelect
+        v-model="newMemberId"
+        :options="userOptions"
+        :exclude-user-ids="activeMemberUserIds"
+        no-data-text="所有项目成员已加入执行"
+        placeholder="选择用户加入执行"
+        class="member-current-panel__user-select"
+      />
+      <ElButton type="primary" @click="handleAdd">新增成员</ElButton>
+    </div>
+
+    <ElTable :data="pagedMembers" :height="247" border row-key="id" size="default">
+      <ElTableColumn type="index" :index="getMemberIndex" label="序号" width="64" align="center" />
+      <ElTableColumn label="成员" width="200" show-overflow-tooltip>
+        <template #default="{ row }">
+          <span class="member-current-panel__name">{{ getMemberDisplayName(row) }}</span>
+        </template>
+      </ElTableColumn>
+      <ElTableColumn label="角色" width="140" align="center">
+        <template #default="{ row }">
+          <ElTag v-if="isOwner(row)" type="warning" effect="light">负责人</ElTag>
+          <ElTag v-else type="info" effect="plain">成员</ElTag>
+        </template>
+      </ElTableColumn>
+      <ElTableColumn label="加入时间" min-width="200" align="center">
+        <template #default="{ row }">
+          {{ formatDateTime(row.joinedAt) }}
+        </template>
+      </ElTableColumn>
+      <ElTableColumn label="操作" width="220" align="center" fixed="right">
+        <template #default="{ row }">
+          <BusinessTableActionCell v-if="!isOwner(row) && isActiveMember(row)" :actions="buildMemberActions(row)" />
+          <span v-else class="member-current-panel__actions-empty">--</span>
+        </template>
+      </ElTableColumn>
+
+      <template #empty>
+        <ElEmpty description="当前执行暂无成员" :image-size="80" />
+      </template>
+    </ElTable>
+
+    <div class="member-current-panel__pagination">
+      <ElPagination
+        v-if="members.length > PAGE_SIZE"
+        v-model:current-page="currentPage"
+        :page-size="PAGE_SIZE"
+        :total="members.length"
+        layout="total, prev, pager, next"
+        background
+        small
+      />
+    </div>
+
+    <BusinessFormDialog
+      v-model="inactiveVisible"
+      :title="`失效成员：${getMemberDisplayName(inactiveTarget)}`"
+      preset="sm"
+      append-to-body
+      @confirm="confirmInactive"
+    >
+      <ElForm
+        ref="inactiveFormRef"
+        :model="inactiveModel"
+        :rules="inactiveRules"
+        label-position="top"
+        :validate-on-rule-change="false"
+      >
+        <ElFormItem label="失效原因" prop="reason">
+          <ElInput
+            v-model="inactiveModel.reason"
+            type="textarea"
+            :rows="4"
+            maxlength="500"
+            show-word-limit
+            placeholder="请输入失效原因"
+          />
+        </ElFormItem>
+      </ElForm>
+    </BusinessFormDialog>
+
+    <BusinessFormDialog
+      v-model="ownerVisible"
+      :title="`设为负责人：${getMemberDisplayName(ownerTarget)}`"
+      preset="sm"
+      append-to-body
+      @confirm="confirmOwner"
+    >
+      <ElForm :model="ownerModel" label-position="top">
+        <ElFormItem label="变更原因">
+          <ElInput
+            v-model="ownerModel.reason"
+            type="textarea"
+            :rows="3"
+            maxlength="500"
+            show-word-limit
+            placeholder="可选填写变更原因"
+          />
+        </ElFormItem>
+      </ElForm>
+    </BusinessFormDialog>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.member-current-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.member-current-panel__toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 12px;
+}
+
+.member-current-panel__user-select {
+  width: 280px;
+}
+
+.member-current-panel__name {
+  display: inline-block;
+  max-width: 100%;
+  overflow: hidden;
+  font-variant-numeric: tabular-nums;
+  text-overflow: ellipsis;
+  vertical-align: middle;
+  white-space: nowrap;
+}
+
+.member-current-panel__actions-empty {
+  color: var(--el-text-color-placeholder);
+}
+
+.member-current-panel__pagination {
+  display: flex;
+  justify-content: flex-end;
+  min-height: 32px;
+}
+</style>

src/views/project/project/execution/modules/member-log-panel.vue

@@ -0,0 +1,260 @@
+<script setup lang="ts">
+import { computed, reactive, watch } from 'vue';
+import { fetchGetProjectExecutionMemberLogPage } from '@/service/api';
+import { useUIPaginatedTable } from '@/hooks/common/table';
+import BusinessUserSelect from '@/components/custom/business-user-select.vue';
+import { formatDateTime, getExecutionMemberActionName, getExecutionMemberActionTagType } from '../shared';
+
+defineOptions({ name: 'ProjectExecutionMemberLogPanel' });
+
+interface Props {
+  projectId: string;
+  executionId: string;
+  userOptions: Api.SystemManage.UserSimple[];
+  active: boolean;
+}
+
+const props = defineProps<Props>();
+
+type ActionType = Api.Project.ExecutionMemberActionType;
+
+const ACTION_TYPE_OPTIONS: Array<{ label: string; value: ActionType }> = [
+  { label: getExecutionMemberActionName('join'), value: 'join' },
+  { label: getExecutionMemberActionName('inactive'), value: 'inactive' },
+  { label: getExecutionMemberActionName('owner_transfer_in'), value: 'owner_transfer_in' },
+  { label: getExecutionMemberActionName('owner_transfer_out'), value: 'owner_transfer_out' }
+];
+
+const searchParams = reactive<{
+  pageNo: number;
+  pageSize: number;
+  actionTypes?: ActionType[];
+  userId?: string;
+}>({
+  pageNo: 1,
+  pageSize: 5,
+  actionTypes: undefined,
+  userId: undefined
+});
+
+const canLoad = computed(() => Boolean(props.projectId && props.executionId));
+
+type LogPageResponse = Awaited<ReturnType<typeof fetchGetProjectExecutionMemberLogPage>>;
+
+function buildRequestParams(): Api.Project.ExecutionMemberLogSearchParams {
+  return {
+    pageNo: searchParams.pageNo,
+    pageSize: searchParams.pageSize,
+    actionTypes: searchParams.actionTypes?.length ? searchParams.actionTypes : undefined,
+    userId: searchParams.userId || undefined
+  };
+}
+
+function transformLogPage(response: LogPageResponse, pageNo: number, pageSize: number) {
+  if (!response.error && response.data) {
+    return {
+      data: response.data.list,
+      pageNum: pageNo,
+      pageSize,
+      total: response.data.total
+    };
+  }
+
+  return {
+    data: [],
+    pageNum: pageNo,
+    pageSize,
+    total: 0
+  };
+}
+
+const { data, loading, getDataByPage, mobilePagination } = useUIPaginatedTable<
+  LogPageResponse,
+  Api.Project.ExecutionMemberLog
+>({
+  paginationProps: {
+    currentPage: searchParams.pageNo,
+    pageSize: searchParams.pageSize
+  },
+  api: () => {
+    if (!canLoad.value) {
+      return Promise.resolve({
+        data: { total: 0, list: [] },
+        error: null
+      } as unknown as LogPageResponse);
+    }
+
+    return fetchGetProjectExecutionMemberLogPage(props.projectId, props.executionId, buildRequestParams());
+  },
+  transform: response => transformLogPage(response, searchParams.pageNo ?? 1, searchParams.pageSize ?? 5),
+  onPaginationParamsChange: params => {
+    searchParams.pageNo = params.currentPage ?? 1;
+    searchParams.pageSize = params.pageSize ?? 5;
+  },
+  immediate: false,
+  columns: () => [{ prop: 'actionTime', label: '时间' }]
+});
+
+// 每次切到该 tab 都按当前筛选条件重拉第 1 页，确保用户在"当前成员" tab 操作后回到这里能看到最新事件
+watch(
+  () => props.active,
+  active => {
+    if (active && canLoad.value) {
+      getDataByPage(1);
+    }
+  },
+  { immediate: true }
+);
+
+// 切换到不同执行项时完全清空筛选条件
+watch(
+  () => props.executionId,
+  () => {
+    resetSearchParams();
+  }
+);
+
+function resetSearchParams() {
+  searchParams.pageNo = 1;
+  searchParams.actionTypes = undefined;
+  searchParams.userId = undefined;
+}
+
+async function handleSearch() {
+  await getDataByPage(1);
+}
+
+async function handleReset() {
+  resetSearchParams();
+  await getDataByPage(1);
+}
+
+function getMemberDisplay(row: Api.Project.ExecutionMemberLog) {
+  return row.userNicknameSnapshot?.trim() || row.userId || '--';
+}
+
+function getOperatorDisplay(row: Api.Project.ExecutionMemberLog) {
+  return row.operatorNicknameSnapshot?.trim() || row.operatorUserId || '--';
+}
+
+function refresh() {
+  return getDataByPage(1);
+}
+
+defineExpose({ refresh });
+</script>
+
+<template>
+  <div class="member-log-panel">
+    <div class="member-log-panel__toolbar">
+      <ElSelect
+        v-model="searchParams.actionTypes"
+        multiple
+        collapse-tags
+        collapse-tags-tooltip
+        clearable
+        placeholder="全部事件"
+        class="member-log-panel__action-select"
+      >
+        <ElOption v-for="item in ACTION_TYPE_OPTIONS" :key="item.value" :label="item.label" :value="item.value" />
+      </ElSelect>
+      <BusinessUserSelect
+        v-model="searchParams.userId"
+        :options="userOptions"
+        placeholder="全部成员"
+        clearable
+        class="member-log-panel__user-select"
+      />
+      <div class="member-log-panel__actions">
+        <ElButton @click="handleReset">重置</ElButton>
+        <ElButton type="primary" @click="handleSearch">查询</ElButton>
+      </div>
+    </div>
+
+    <ElTable v-loading="loading" :data="data" :height="247" border size="default">
+      <ElTableColumn label="时间" width="170" align="center">
+        <template #default="{ row }">
+          {{ formatDateTime(row.actionTime) }}
+        </template>
+      </ElTableColumn>
+      <ElTableColumn label="事件类型" width="130" align="center">
+        <template #default="{ row }">
+          <ElTag :type="getExecutionMemberActionTagType(row.actionType)" effect="light">
+            {{ getExecutionMemberActionName(row.actionType) }}
+          </ElTag>
+        </template>
+      </ElTableColumn>
+      <ElTableColumn label="成员" min-width="120" show-overflow-tooltip>
+        <template #default="{ row }">
+          {{ getMemberDisplay(row) }}
+        </template>
+      </ElTableColumn>
+      <ElTableColumn label="操作人" min-width="120" show-overflow-tooltip>
+        <template #default="{ row }">
+          {{ getOperatorDisplay(row) }}
+        </template>
+      </ElTableColumn>
+      <ElTableColumn label="原因" min-width="200" show-overflow-tooltip>
+        <template #default="{ row }">
+          <span v-if="row.reason">{{ row.reason }}</span>
+          <span v-else class="member-log-panel__empty">--</span>
+        </template>
+      </ElTableColumn>
+
+      <template #empty>
+        <ElEmpty description="暂无变更记录" :image-size="80" />
+      </template>
+    </ElTable>
+
+    <div class="member-log-panel__pagination">
+      <ElPagination
+        v-if="mobilePagination.total"
+        background
+        layout="total, prev, pager, next"
+        small
+        v-bind="mobilePagination"
+        @current-change="mobilePagination['current-change']"
+        @size-change="mobilePagination['size-change']"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.member-log-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.member-log-panel__toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 12px;
+}
+
+.member-log-panel__action-select {
+  width: 200px;
+}
+
+.member-log-panel__user-select {
+  width: 200px;
+}
+
+.member-log-panel__actions {
+  display: flex;
+  gap: 12px;
+  margin-left: auto;
+}
+
+.member-log-panel__empty {
+  color: var(--el-text-color-placeholder);
+}
+
+.member-log-panel__pagination {
+  display: flex;
+  justify-content: flex-end;
+  min-height: 32px;
+}
+</style>

src/views/project/project/execution/modules/status-action-dialog.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import { computed, nextTick, reactive, watch } from 'vue';
+import { useForm, useFormRules } from '@/hooks/common/form';
+import BusinessFormDialog from '@/components/custom/business-form-dialog.vue';
+
+defineOptions({ name: 'ProjectExecutionStatusActionDialog' });
+
+interface Props {
+  title: string;
+  action: Api.Project.LifecycleAction<string> | null;
+}
+
+interface Emits {
+  (e: 'submit', reason: string | null): void;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits<Emits>();
+
+const visible = defineModel<boolean>('visible', {
+  default: false
+});
+
+const { formRef, validate } = useForm();
+const { createRequiredRule } = useFormRules();
+
+const model = reactive({
+  reason: ''
+});
+
+const rules = computed(
+  () =>
+    ({
+      reason: props.action?.needReason ? [createRequiredRule('请输入操作原因')] : []
+    }) satisfies Record<string, App.Global.FormRule[]>
+);
+
+async function handleConfirm() {
+  await validate();
+
+  emit('submit', model.reason.trim() || null);
+}
+
+watch(
+  () => visible.value,
+  async value => {
+    if (!value) {
+      return;
+    }
+
+    model.reason = '';
+    await nextTick();
+    formRef.value?.clearValidate();
+  }
+);
+</script>
+
+<template>
+  <BusinessFormDialog v-model="visible" :title="title" preset="sm" @confirm="handleConfirm">
+    <ElForm ref="formRef" :model="model" :rules="rules" label-position="top" :validate-on-rule-change="false">
+      <ElFormItem label="操作原因" prop="reason">
+        <ElInput
+          v-model="model.reason"
+          type="textarea"
+          :rows="4"
+          maxlength="500"
+          show-word-limit
+          :placeholder="action?.needReason ? '请输入操作原因' : '可选填写操作原因'"
+        />
+      </ElFormItem>
+    </ElForm>
+  </BusinessFormDialog>
+</template>
+
+<style scoped></style>

src/views/project/project/execution/modules/task-board-view.vue

@@ -0,0 +1,242 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { Edit, Flag, User } from '@element-plus/icons-vue';
+import { formatDate, getProgressText, getTaskStatusName } from '../shared';
+
+defineOptions({ name: 'ProjectExecutionTaskBoardView' });
+
+interface Props {
+  data: Api.Project.ProjectTask[];
+  loading: boolean;
+  statusBoard: Api.Project.StatusBoard | null;
+  canUpdate: boolean;
+  canChangeStatus: boolean;
+}
+
+interface Emits {
+  (e: 'detail', row: Api.Project.ProjectTask): void;
+  (e: 'edit', row: Api.Project.ProjectTask): void;
+  (
+    e: 'status-action',
+    row: Api.Project.ProjectTask,
+    action: Api.Project.LifecycleAction<Api.Project.ProjectTaskActionCode> | null
+  ): void;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits<Emits>();
+
+const groupedTasks = computed(() => {
+  const map = new Map<string, Api.Project.ProjectTask[]>();
+  const items = props.statusBoard?.items ?? [];
+
+  items.forEach(item => {
+    map.set(item.statusCode, []);
+  });
+
+  props.data.forEach(task => {
+    const list = map.get(task.statusCode);
+
+    if (list) {
+      list.push(task);
+    }
+  });
+
+  return items.map(item => ({
+    statusCode: item.statusCode,
+    title: item.statusName,
+    count: item.count,
+    tasks: map.get(item.statusCode) || []
+  }));
+});
+
+function getFirstAction(row: Api.Project.ProjectTask) {
+  return row.availableActions[0] || null;
+}
+</script>
+
+<template>
+  <ElCard class="task-board-card" body-class="task-board-card__body">
+    <ElSkeleton v-if="loading" :rows="6" animated />
+    <div v-else class="task-board">
+      <section v-for="column in groupedTasks" :key="column.statusCode" class="task-board-column">
+        <header class="task-board-column__header">
+          <strong>{{ column.title }}</strong>
+          <ElTag effect="plain" size="small">{{ column.count }}</ElTag>
+        </header>
+
+        <ElScrollbar class="task-board-column__scrollbar">
+          <ElEmpty v-if="column.tasks.length === 0" :description="`暂无${column.title}任务`" />
+          <template v-else>
+            <article
+              v-for="task in column.tasks"
+              :key="task.id"
+              class="task-board-card-item"
+              @click="emit('detail', task)"
+            >
+              <div class="task-board-card-item__top">
+                <strong class="task-board-card-item__title">{{ task.taskTitle || '未命名任务' }}</strong>
+                <ElTag effect="plain" size="small">{{ getTaskStatusName(task) }}</ElTag>
+              </div>
+
+              <div class="task-board-card-item__meta">
+                <span>
+                  <ElIcon><User /></ElIcon>
+                  {{ task.ownerNickname || task.ownerId || '未设置负责人' }}
+                </span>
+                <span>
+                  <ElIcon><Flag /></ElIcon>
+                  计划结束 {{ formatDate(task.plannedEndDate) }}
+                </span>
+              </div>
+
+              <div class="task-board-card-item__progress">
+                <span>进度 {{ getProgressText(task.progressRate) }}</span>
+                <ElProgress :percentage="task.progressRate" :stroke-width="6" :show-text="false" />
+              </div>
+
+              <div class="task-board-card-item__actions" @click.stop>
+                <ElButton v-if="canUpdate" size="small" plain :icon="Edit" @click="emit('edit', task)">编辑</ElButton>
+                <ElButton
+                  v-if="canChangeStatus && getFirstAction(task)"
+                  size="small"
+                  type="primary"
+                  plain
+                  @click="emit('status-action', task, getFirstAction(task)!)"
+                >
+                  {{ getFirstAction(task)!.actionName }}
+                </ElButton>
+                <ElButton
+                  v-else-if="canChangeStatus"
+                  size="small"
+                  type="primary"
+                  plain
+                  @click="emit('status-action', task, null)"
+                >
+                  状态
+                </ElButton>
+              </div>
+            </article>
+          </template>
+        </ElScrollbar>
+      </section>
+    </div>
+  </ElCard>
+</template>
+
+<style scoped lang="scss">
+.task-board-card {
+  min-height: 0;
+  flex: 1;
+}
+
+:deep(.task-board-card__body) {
+  display: flex;
+  min-height: 0;
+  height: 100%;
+}
+
+.task-board {
+  display: grid;
+  grid-template-columns: repeat(5, minmax(220px, 1fr));
+  gap: 12px;
+  width: 100%;
+  min-height: 0;
+  overflow-x: auto;
+}
+
+.task-board-column {
+  display: flex;
+  min-width: 220px;
+  min-height: 0;
+  flex-direction: column;
+  border: 1px solid rgb(226 232 240 / 92%);
+  border-radius: 8px;
+  background-color: rgb(248 250 252 / 82%);
+}
+
+.task-board-column__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  min-height: 42px;
+  padding: 10px 12px;
+  border-bottom: 1px solid rgb(226 232 240 / 92%);
+  color: rgb(15 23 42 / 94%);
+}
+
+.task-board-column__scrollbar {
+  min-height: 0;
+  flex: 1;
+  padding: 10px;
+}
+
+.task-board-card-item {
+  padding: 10px;
+  border: 1px solid rgb(226 232 240 / 92%);
+  border-radius: 6px;
+  margin-bottom: 10px;
+  background-color: #fff;
+  cursor: pointer;
+  transition:
+    border-color 0.16s ease,
+    box-shadow 0.16s ease;
+}
+
+.task-board-card-item:hover {
+  border-color: rgb(148 163 184 / 76%);
+  box-shadow: 0 6px 18px rgb(15 23 42 / 8%);
+}
+
+.task-board-card-item__top {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.task-board-card-item__title {
+  min-width: 0;
+  color: rgb(15 23 42 / 94%);
+  font-size: 14px;
+  line-height: 1.5;
+  word-break: break-word;
+}
+
+.task-board-card-item__meta {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin-top: 10px;
+  color: rgb(100 116 139 / 94%);
+  font-size: 12px;
+}
+
+.task-board-card-item__meta span {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  min-width: 0;
+}
+
+.task-board-card-item__progress {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin-top: 10px;
+  color: rgb(71 85 105 / 96%);
+  font-size: 12px;
+}
+
+.task-board-card-item__actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  margin-top: 12px;
+}
+
+.task-board-card-item__actions :deep(.el-button + .el-button) {
+  margin-left: 0;
+}
+</style>

src/views/project/project/execution/modules/task-detail-dialog.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import BusinessFormDialog from '@/components/custom/business-form-dialog.vue';
+import BusinessFormSection from '@/components/custom/business-form-section.vue';
+import { formatDate, formatDateTime, getProgressText, getTaskStatusName } from '../shared';
+
+defineOptions({ name: 'ProjectExecutionTaskDetailDialog' });
+
+interface Props {
+  rowData: Api.Project.ProjectTask | null;
+}
+
+const props = defineProps<Props>();
+
+const visible = defineModel<boolean>('visible', {
+  default: false
+});
+
+const detailItems = computed(() => {
+  const row = props.rowData;
+
+  return [
+    { label: '任务名称', value: row?.taskTitle || '--' },
+    { label: '状态', value: row ? getTaskStatusName(row) : '--' },
+    { label: '负责人', value: row?.ownerNickname || row?.ownerId || '--' },
+    { label: '进度', value: getProgressText(row?.progressRate) },
+    { label: '计划开始日期', value: formatDate(row?.plannedStartDate) },
+    { label: '计划结束日期', value: formatDate(row?.plannedEndDate) },
+    { label: '实际开始日期', value: formatDate(row?.actualStartDate) },
+    { label: '实际结束日期', value: formatDate(row?.actualEndDate) },
+    { label: '最近更新', value: formatDateTime(row?.updateTime) },
+    { label: '状态原因', value: row?.lastStatusReason || '--', span: 2 },
+    { label: '任务说明', value: row?.taskDesc || '--', span: 2 }
+  ];
+});
+</script>
+
+<template>
+  <BusinessFormDialog v-model="visible" title="任务详情" preset="md" :show-footer="false">
+    <BusinessFormSection title="任务信息">
+      <ElDescriptions :column="2" border>
+        <ElDescriptionsItem v-for="item in detailItems" :key="item.label" :label="item.label" :span="item.span || 1">
+          <span class="task-detail-text">{{ item.value }}</span>
+        </ElDescriptionsItem>
+      </ElDescriptions>
+    </BusinessFormSection>
+  </BusinessFormDialog>
+</template>
+
+<style scoped>
+.task-detail-text {
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+</style>

src/views/project/project/execution/modules/task-operate-dialog.vue

@@ -0,0 +1,364 @@
+<script setup lang="ts">
+import { computed, nextTick, reactive, ref, watch } from 'vue';
+import { useResizeObserver } from '@vueuse/core';
+import dayjs from 'dayjs';
+import { useForm, useFormRules } from '@/hooks/common/form';
+import BusinessFormDialog from '@/components/custom/business-form-dialog.vue';
+import BusinessFormSection from '@/components/custom/business-form-section.vue';
+import BusinessRichTextEditor from '@/components/custom/business-rich-text-editor.vue';
+import BusinessUserSelect from '@/components/custom/business-user-select.vue';
+
+defineOptions({ name: 'ProjectExecutionTaskOperateDialog' });
+
+type OperateMode = 'create' | 'edit';
+
+export interface PlannedEndShortcutOffset {
+  text: string;
+  days?: number;
+  months?: number;
+  years?: number;
+}
+
+interface Props {
+  mode: OperateMode;
+  rowData: Api.Project.ProjectTask | null;
+  userOptions: Api.SystemManage.UserSimple[];
+  taskOptions: Api.Project.ProjectTask[];
+  plannedEndShortcuts?: PlannedEndShortcutOffset[];
+}
+
+interface Emits {
+  (e: 'submit', payload: Api.Project.SaveProjectTaskParams): void;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  plannedEndShortcuts: () => [
+    { text: '三天', days: 3 },
+    { text: '一星期', days: 7 },
+    { text: '两星期', days: 14 },
+    { text: '一个月', months: 1 },
+    { text: '三个月', months: 3 }
+  ]
+});
+const emit = defineEmits<Emits>();
+
+const visible = defineModel<boolean>('visible', {
+  default: false
+});
+
+const { formRef, validate } = useForm();
+const { createRequiredRule } = useFormRules();
+
+interface FormModel {
+  parentTaskId: string | null;
+  taskTitle: string;
+  ownerId: string | null;
+  plannedStartDate: string | null;
+  plannedEndDate: string | null;
+  taskDesc: string | null;
+  assigneeUserIds: string[];
+}
+
+const model = reactive<FormModel>({
+  parentTaskId: null,
+  taskTitle: '',
+  ownerId: null,
+  plannedStartDate: null,
+  plannedEndDate: null,
+  taskDesc: null,
+  assigneeUserIds: []
+});
+
+const dialogTitle = computed(() => (props.mode === 'create' ? '新建任务' : '编辑任务'));
+
+const selectableParentTasks = computed(() => props.taskOptions.filter(item => item.id !== props.rowData?.id));
+
+/** 左栏容器 ref：用其高度动态驱动右侧富文本，让两栏视觉等高 */
+const leftColRef = ref<HTMLElement>();
+const editorHeight = ref<string>('45vh');
+
+useResizeObserver(leftColRef, entries => {
+  const h = entries[0]?.contentRect.height;
+  if (h && h > 120) {
+    editorHeight.value = `${Math.max(h - 60, 240)}px`;
+  }
+});
+
+function isEmptyRichText(html: string | null | undefined) {
+  if (!html) {
+    return true;
+  }
+
+  const text = html
+    .replace(/<[^>]+>/g, '')
+    .replace(/&nbsp;/g, '')
+    .trim();
+  if (text) {
+    return false;
+  }
+
+  return !/<img\b/i.test(html);
+}
+
+const rules = computed(
+  () =>
+    ({
+      taskTitle: [createRequiredRule('请输入任务名称')],
+      ownerId: model.parentTaskId ? [] : [createRequiredRule('请选择负责人')],
+      plannedStartDate: [createRequiredRule('请选择计划开始日期')],
+      plannedEndDate: [
+        createRequiredRule('请选择计划结束日期'),
+        {
+          validator: (_rule, value: string | null, callback) => {
+            if (!isPlannedDateRangeValid(model.plannedStartDate, value)) {
+              callback(new Error('计划结束日期不能早于计划开始日期'));
+              return;
+            }
+
+            callback();
+          },
+          trigger: 'change'
+        }
+      ]
+    }) satisfies Record<string, App.Global.FormRule[]>
+);
+
+function parsePlannedDate(value: string | null) {
+  if (!value) {
+    return null;
+  }
+
+  const date = new Date(value);
+  return Number.isNaN(date.getTime()) ? null : date;
+}
+
+function isPlannedDateRangeValid(startDate: string | null, endDate: string | null) {
+  if (!startDate || !endDate) {
+    return true;
+  }
+
+  return !dayjs(endDate).isBefore(dayjs(startDate), 'day');
+}
+
+function applyOffset(date: Date, offset: PlannedEndShortcutOffset) {
+  if (offset.days) {
+    date.setDate(date.getDate() + offset.days);
+  }
+  if (offset.months) {
+    date.setMonth(date.getMonth() + offset.months);
+  }
+  if (offset.years) {
+    date.setFullYear(date.getFullYear() + offset.years);
+  }
+}
+
+const plannedEndDateShortcuts = computed(() =>
+  props.plannedEndShortcuts.map(offset => ({
+    text: offset.text,
+    value: () => {
+      let startDate = parsePlannedDate(model.plannedStartDate);
+
+      if (!startDate) {
+        startDate = new Date();
+        model.plannedStartDate = dayjs(startDate).format('YYYY-MM-DD');
+        window.$message?.info('未选择计划开始日期，已按今日为基准计算');
+        nextTick(() => formRef.value?.clearValidate('plannedStartDate'));
+      }
+
+      const endDate = new Date(startDate.getTime());
+      applyOffset(endDate, offset);
+      return endDate;
+    }
+  }))
+);
+
+function normalizeAssigneeIds(ids: string[]) {
+  return Array.from(new Set(ids.filter(id => id && id !== model.ownerId)));
+}
+
+async function handleConfirm() {
+  await validate();
+
+  const payload: Api.Project.SaveProjectTaskParams = {
+    parentTaskId: model.parentTaskId || null,
+    taskTitle: model.taskTitle.trim(),
+    ownerId: model.ownerId || null,
+    plannedStartDate: model.plannedStartDate,
+    plannedEndDate: model.plannedEndDate,
+    taskDesc: isEmptyRichText(model.taskDesc) ? null : (model.taskDesc ?? null)
+  };
+
+  if (props.mode === 'create') {
+    payload.assigneeUserIds = normalizeAssigneeIds(model.assigneeUserIds);
+  }
+
+  emit('submit', payload);
+}
+
+function handleAssigneeChange(value: string[]) {
+  model.assigneeUserIds = normalizeAssigneeIds(value);
+}
+
+watch(
+  () => visible.value,
+  async value => {
+    if (!value) {
+      return;
+    }
+
+    model.parentTaskId = props.rowData?.parentTaskId || null;
+    model.taskTitle = props.rowData?.taskTitle || '';
+    model.ownerId = props.rowData?.ownerId || null;
+    model.plannedStartDate = props.rowData?.plannedStartDate || null;
+    model.plannedEndDate = props.rowData?.plannedEndDate || null;
+    model.taskDesc = props.rowData?.taskDesc || null;
+    model.assigneeUserIds = [];
+
+    await nextTick();
+    formRef.value?.clearValidate();
+  }
+);
+
+watch(
+  () => model.ownerId,
+  () => {
+    if (props.mode === 'create') {
+      model.assigneeUserIds = normalizeAssigneeIds(model.assigneeUserIds);
+    }
+  }
+);
+</script>
+
+<template>
+  <BusinessFormDialog
+    v-model="visible"
+    :title="dialogTitle"
+    width="1100px"
+    max-body-height="78vh"
+    @confirm="handleConfirm"
+  >
+    <ElForm
+      ref="formRef"
+      :model="model"
+      :rules="rules"
+      label-position="top"
+      :validate-on-rule-change="false"
+      class="task-operate-dialog__form"
+    >
+      <div class="task-operate-dialog__grid">
+        <div ref="leftColRef" class="task-operate-dialog__col-left">
+          <BusinessFormSection title="任务信息">
+            <ElFormItem label="任务名称" prop="taskTitle">
+              <ElInput v-model="model.taskTitle" maxlength="200" placeholder="请输入任务名称" />
+            </ElFormItem>
+
+            <ElFormItem label="父任务">
+              <ElSelect v-model="model.parentTaskId" clearable filterable class="w-full" placeholder="请选择父任务">
+                <ElOption
+                  v-for="item in selectableParentTasks"
+                  :key="item.id"
+                  :label="item.taskTitle"
+                  :value="item.id"
+                />
+              </ElSelect>
+            </ElFormItem>
+
+            <ElFormItem label="负责人" prop="ownerId">
+              <BusinessUserSelect v-model="model.ownerId" :options="userOptions" placeholder="请选择负责人" />
+            </ElFormItem>
+
+            <ElFormItem v-if="mode === 'create'" label="协办人" prop="assigneeUserIds">
+              <ElSelect
+                v-model="model.assigneeUserIds"
+                multiple
+                filterable
+                collapse-tags
+                collapse-tags-tooltip
+                :max-collapse-tags="2"
+                class="w-full"
+                placeholder="请选择协办人"
+                @change="handleAssigneeChange"
+              >
+                <ElOption
+                  v-for="item in userOptions"
+                  :key="item.id"
+                  :label="item.id === model.ownerId ? `${item.nickname}（负责人）` : item.nickname"
+                  :value="item.id"
+                  :disabled="item.id === model.ownerId"
+                />
+              </ElSelect>
+            </ElFormItem>
+
+            <ElFormItem label="计划开始日期" prop="plannedStartDate">
+              <ElDatePicker
+                v-model="model.plannedStartDate"
+                type="date"
+                value-format="YYYY-MM-DD"
+                placeholder="选择计划开始日期"
+                class="task-operate-dialog__date-picker"
+              />
+            </ElFormItem>
+
+            <ElFormItem label="计划结束日期" prop="plannedEndDate">
+              <ElDatePicker
+                v-model="model.plannedEndDate"
+                type="date"
+                value-format="YYYY-MM-DD"
+                placeholder="选择计划结束日期"
+                :shortcuts="plannedEndDateShortcuts"
+                class="task-operate-dialog__date-picker"
+              />
+            </ElFormItem>
+          </BusinessFormSection>
+        </div>
+
+        <div class="task-operate-dialog__col-right">
+          <BusinessFormSection title="任务说明">
+            <ElFormItem class="task-operate-dialog__desc-item">
+              <BusinessRichTextEditor
+                v-model="model.taskDesc"
+                :height="editorHeight"
+                upload-directory="task"
+                placeholder="请输入任务说明"
+              />
+            </ElFormItem>
+          </BusinessFormSection>
+        </div>
+      </div>
+    </ElForm>
+  </BusinessFormDialog>
+</template>
+
+<style scoped>
+.task-operate-dialog__grid {
+  display: grid;
+  grid-template-columns: 360px 1fr;
+  gap: 24px;
+  align-items: start;
+}
+
+.task-operate-dialog__col-left,
+.task-operate-dialog__col-right {
+  min-width: 0;
+}
+
+.task-operate-dialog__col-right {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.task-operate-dialog__desc-item {
+  margin-bottom: 0;
+}
+
+@media (width <= 1024px) {
+  .task-operate-dialog__grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+:deep(.task-operate-dialog__date-picker.el-date-editor.el-input) {
+  width: 100%;
+}
+</style>

src/views/project/project/execution/modules/task-search.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import TableSearchFields, { type SearchField } from '@/components/custom/table-search-fields.vue';
+
+defineOptions({ name: 'ProjectExecutionTaskSearch' });
+
+interface Props {
+  model: Api.Project.ProjectTaskSearchParams;
+  userOptions: Api.SystemManage.UserSimple[];
+  statusOptions: Api.Project.StatusBoardItem[];
+  disabled?: boolean;
+}
+
+interface Emits {
+  (e: 'search'): void;
+  (e: 'reset'): void;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  disabled: false
+});
+
+const emit = defineEmits<Emits>();
+
+const ownerOptions = computed(() =>
+  props.userOptions.map(item => ({
+    label: item.nickname,
+    value: item.id
+  }))
+);
+
+const fields = computed<SearchField[]>(() => [
+  {
+    key: 'keyword',
+    label: '关键词',
+    type: 'input',
+    placeholder: '任务名称/说明'
+  },
+  {
+    key: 'statusCode',
+    label: '状态',
+    type: 'select',
+    options: props.statusOptions.map(item => ({
+      label: item.statusName,
+      value: item.statusCode
+    })),
+    placeholder: '全部状态'
+  },
+  {
+    key: 'ownerId',
+    label: '负责人',
+    type: 'select',
+    options: ownerOptions.value,
+    placeholder: '全部负责人'
+  },
+  {
+    key: 'updateTime',
+    label: '更新时间',
+    type: 'dateRange'
+  }
+]);
+</script>
+
+<template>
+  <TableSearchFields
+    :model-value="model"
+    :fields="fields"
+    :columns="4"
+    :disabled="disabled"
+    @search="emit('search')"
+    @reset="emit('reset')"
+  />
+</template>
+
+<style scoped></style>

src/views/project/project/execution/modules/task-table-view.vue

@@ -0,0 +1,210 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { PaginationProps } from 'element-plus';
+import BusinessTableActionCell, { type BusinessTableAction } from '@/components/custom/business-table-action-cell';
+import { formatDateRange, formatDateTime, getTaskStatusName, getTaskStatusTagType } from '../shared';
+
+defineOptions({ name: 'ProjectExecutionTaskTableView' });
+
+interface Props {
+  data: Api.Project.ProjectTask[];
+  loading: boolean;
+  pagination: Partial<PaginationProps & Record<string, any>>;
+  canUpdate: boolean;
+  canChangeStatus: boolean;
+}
+
+interface Emits {
+  (e: 'detail', row: Api.Project.ProjectTask): void;
+  (e: 'edit', row: Api.Project.ProjectTask): void;
+  (
+    e: 'status-action',
+    row: Api.Project.ProjectTask,
+    action: Api.Project.LifecycleAction<Api.Project.ProjectTaskActionCode> | null
+  ): void;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits<Emits>();
+
+const paginationVisible = computed(() => Boolean(props.pagination.total));
+
+const taskTitleMap = computed(() => {
+  const map = new Map<string, string>();
+  props.data.forEach(item => {
+    if (item.id && item.taskTitle) {
+      map.set(item.id, item.taskTitle);
+    }
+  });
+  return map;
+});
+
+function getParentTaskLabel(parentTaskId: string | null) {
+  if (!parentTaskId) {
+    return '--';
+  }
+  return taskTitleMap.value.get(parentTaskId) || '--';
+}
+
+function createActions(row: Api.Project.ProjectTask): BusinessTableAction[] {
+  const actions: BusinessTableAction[] = [
+    {
+      key: 'detail',
+      label: '详情',
+      onClick: () => emit('detail', row)
+    }
+  ];
+
+  if (props.canUpdate) {
+    actions.push({
+      key: 'edit',
+      label: '编辑',
+      onClick: () => emit('edit', row)
+    });
+  }
+
+  if (!props.canChangeStatus) {
+    return actions;
+  }
+
+  if (!row.availableActions.length) {
+    return [
+      ...actions,
+      {
+        key: 'status',
+        label: '状态',
+        buttonType: 'primary',
+        onClick: () => emit('status-action', row, null)
+      }
+    ];
+  }
+
+  return [
+    ...actions,
+    ...row.availableActions.map(action => ({
+      key: `status-${action.actionCode}`,
+      label: action.actionName,
+      buttonType: 'primary' as const,
+      onClick: () => emit('status-action', row, action)
+    }))
+  ];
+}
+
+function handlePageChange(page: number) {
+  props.pagination['current-change']?.(page);
+}
+
+function handleSizeChange(pageSize: number) {
+  props.pagination['size-change']?.(pageSize);
+}
+</script>
+
+<template>
+  <ElCard class="task-table-card" body-class="business-table-card-body">
+    <div class="flex-1">
+      <ElTable
+        v-loading="loading"
+        :data="data"
+        height="100%"
+        border
+        row-key="id"
+        highlight-current-row
+        @row-dblclick="row => emit('detail', row)"
+      >
+        <ElTableColumn type="index" label="序号" width="64" align="center" />
+        <ElTableColumn label="任务名称" min-width="220" show-overflow-tooltip>
+          <template #default="{ row }">
+            <ElButton link type="primary" class="task-title-link" @click="emit('detail', row)">
+              {{ row.taskTitle || '--' }}
+            </ElButton>
+          </template>
+        </ElTableColumn>
+        <ElTableColumn label="状态" width="100" align="center">
+          <template #default="{ row }">
+            <ElTag effect="plain" :type="getTaskStatusTagType(row.statusCode)">{{ getTaskStatusName(row) }}</ElTag>
+          </template>
+        </ElTableColumn>
+        <ElTableColumn label="负责人" min-width="120" show-overflow-tooltip>
+          <template #default="{ row }">{{ row.ownerNickname || row.ownerId || '--' }}</template>
+        </ElTableColumn>
+        <ElTableColumn label="父任务" min-width="140" show-overflow-tooltip>
+          <template #default="{ row }">{{ getParentTaskLabel(row.parentTaskId) }}</template>
+        </ElTableColumn>
+        <ElTableColumn label="进度" width="150">
+          <template #default="{ row }">
+            <div class="task-table-progress">
+              <ElProgress :percentage="row.progressRate" :stroke-width="6" />
+            </div>
+          </template>
+        </ElTableColumn>
+        <ElTableColumn label="计划周期" min-width="190" show-overflow-tooltip>
+          <template #default="{ row }">{{ formatDateRange(row.plannedStartDate, row.plannedEndDate) }}</template>
+        </ElTableColumn>
+        <ElTableColumn label="实际周期" min-width="190" show-overflow-tooltip>
+          <template #default="{ row }">{{ formatDateRange(row.actualStartDate, row.actualEndDate) }}</template>
+        </ElTableColumn>
+        <ElTableColumn label="最近更新" width="170">
+          <template #default="{ row }">{{ formatDateTime(row.updateTime) }}</template>
+        </ElTableColumn>
+        <ElTableColumn label="操作" width="220" fixed="right" align="center" class-name="task-operate-column">
+          <template #default="{ row }">
+            <BusinessTableActionCell :actions="createActions(row)" />
+          </template>
+        </ElTableColumn>
+      </ElTable>
+    </div>
+
+    <div v-if="paginationVisible" class="task-table-pagination">
+      <ElPagination
+        background
+        layout="total, sizes, prev, pager, next, jumper"
+        v-bind="pagination"
+        @current-change="handlePageChange"
+        @size-change="handleSizeChange"
+      />
+    </div>
+  </ElCard>
+</template>
+
+<style scoped lang="scss">
+.task-table-card {
+  min-height: 0;
+  flex: 1;
+}
+
+.task-title-link {
+  max-width: 100%;
+  padding: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  vertical-align: top;
+}
+
+.task-table-progress {
+  width: 120px;
+}
+
+.task-table-pagination {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 20px;
+}
+
+:deep(.el-table__row.current-row > td.el-table__cell) {
+  background-color: rgb(64 158 255 / 8%);
+}
+
+:deep(.task-operate-column) {
+  background-color: var(--el-bg-color, #ffffff) !important;
+}
+
+:deep(.el-table__row.current-row) {
+  .task-operate-column {
+    background-color: var(--el-bg-color, #ffffff) !important;
+  }
+
+  td.el-table__cell.is-fixed-right {
+    background-color: var(--el-bg-color, #ffffff) !important;
+  }
+}
+</style>

src/views/project/project/execution/modules/task-workspace.vue

@@ -0,0 +1,444 @@
+<script setup lang="ts">
+import { computed, markRaw, reactive, ref, watch } from 'vue';
+import { Plus } from '@element-plus/icons-vue';
+import {
+  fetchChangeProjectTaskStatus,
+  fetchCreateProjectTask,
+  fetchGetProjectTask,
+  fetchGetProjectTaskPage,
+  fetchGetProjectTaskStatusBoard,
+  fetchUpdateProjectTask
+} from '@/service/api/project';
+import { useUIPaginatedTable } from '@/hooks/common/table';
+import { shouldRequireTaskProgressBeforeComplete } from '../shared';
+import StatusActionDialog from './status-action-dialog.vue';
+import TaskBoardView from './task-board-view.vue';
+import TaskDetailDialog from './task-detail-dialog.vue';
+import TaskOperateDialog from './task-operate-dialog.vue';
+import TaskSearch from './task-search.vue';
+import TaskTableView from './task-table-view.vue';
+import IconMdiViewColumnOutline from '~icons/mdi/view-column-outline';
+import IconMdiTableLarge from '~icons/mdi/table-large';
+
+defineOptions({ name: 'ProjectExecutionTaskWorkspace' });
+
+type ViewMode = 'table' | 'board';
+type OperateMode = 'create' | 'edit';
+type TaskPageResponse = Awaited<ReturnType<typeof fetchGetProjectTaskPage>>;
+type TaskStatusAction = Api.Project.LifecycleAction<Api.Project.ProjectTaskActionCode>;
+
+interface Props {
+  projectId: string;
+  execution: Api.Project.ProjectExecution | null;
+  ownerOptions: Api.SystemManage.UserSimple[];
+  canCreate: boolean;
+  canUpdate: boolean;
+  canChangeStatus: boolean;
+}
+
+const props = defineProps<Props>();
+
+const viewMode = ref<ViewMode>('table');
+const viewModeOptions = [
+  { label: '表格', value: 'table', icon: markRaw(IconMdiTableLarge) },
+  { label: '看板', value: 'board', icon: markRaw(IconMdiViewColumnOutline) }
+];
+const operateVisible = ref(false);
+const detailVisible = ref(false);
+const statusActionVisible = ref(false);
+const operateMode = ref<OperateMode>('create');
+const currentTask = ref<Api.Project.ProjectTask | null>(null);
+const currentStatusAction = ref<TaskStatusAction | null>(null);
+const taskStatusBoard = ref<Api.Project.StatusBoard | null>(null);
+
+const searchParams = reactive<Api.Project.ProjectTaskSearchParams>({
+  pageNo: 1,
+  pageSize: 10,
+  keyword: '',
+  parentTaskId: undefined,
+  ownerId: undefined,
+  statusCode: undefined,
+  updateTime: undefined
+});
+
+const executionId = computed(() => props.execution?.id || '');
+
+const canLoadTasks = computed(() => Boolean(props.projectId && executionId.value));
+
+const statusActionTitle = computed(() =>
+  currentStatusAction.value ? `任务状态变更：${currentStatusAction.value.actionName}` : '任务状态变更'
+);
+
+function createRequestParams(): Api.Project.ProjectTaskSearchParams {
+  return {
+    ...searchParams,
+    keyword: searchParams.keyword?.trim() || undefined
+  };
+}
+
+function createStatusBoardParams(): Api.Project.ProjectTaskStatusBoardParams {
+  return {
+    keyword: searchParams.keyword?.trim() || undefined,
+    parentTaskId: searchParams.parentTaskId,
+    ownerId: searchParams.ownerId,
+    updateTime: searchParams.updateTime
+  };
+}
+
+function transformTaskPage(response: TaskPageResponse, pageNo: number, pageSize: number) {
+  if (!response.error && response.data) {
+    return {
+      data: response.data.list,
+      pageNum: pageNo,
+      pageSize,
+      total: response.data.total
+    };
+  }
+
+  return {
+    data: [],
+    pageNum: pageNo,
+    pageSize,
+    total: 0
+  };
+}
+
+const { data, loading, getData, getDataByPage, mobilePagination } = useUIPaginatedTable<
+  TaskPageResponse,
+  Api.Project.ProjectTask
+>({
+  paginationProps: {
+    currentPage: searchParams.pageNo,
+    pageSize: searchParams.pageSize
+  },
+  api: () => {
+    if (!canLoadTasks.value) {
+      return Promise.resolve({
+        data: { total: 0, list: [] },
+        error: null
+      } as unknown as TaskPageResponse);
+    }
+
+    return fetchGetProjectTaskPage(props.projectId, executionId.value, createRequestParams());
+  },
+  transform: response => transformTaskPage(response, searchParams.pageNo ?? 1, searchParams.pageSize ?? 10),
+  onPaginationParamsChange: params => {
+    searchParams.pageNo = params.currentPage ?? 1;
+    searchParams.pageSize = params.pageSize ?? 10;
+  },
+  columns: () => [{ prop: 'taskTitle', label: '任务名称', minWidth: 160 }]
+});
+
+const taskOptions = computed(() => data.value);
+
+function resetSearchParams() {
+  searchParams.pageNo = 1;
+  searchParams.keyword = '';
+  searchParams.parentTaskId = undefined;
+  searchParams.ownerId = undefined;
+  searchParams.statusCode = undefined;
+  searchParams.updateTime = undefined;
+}
+
+async function handleSearch() {
+  await Promise.all([getDataByPage(1), loadTaskStatusBoard()]);
+}
+
+async function handleReset() {
+  resetSearchParams();
+  await Promise.all([getDataByPage(1), loadTaskStatusBoard()]);
+}
+
+function handleCreate() {
+  if (!props.execution) {
+    window.$message?.warning('请先选择执行项');
+    return;
+  }
+
+  operateMode.value = 'create';
+  currentTask.value = null;
+  operateVisible.value = true;
+}
+
+async function getTaskDetail(row: Api.Project.ProjectTask) {
+  if (!props.execution) {
+    return row;
+  }
+
+  const result = await fetchGetProjectTask(props.projectId, props.execution.id, row.id);
+
+  return result.error || !result.data ? row : result.data;
+}
+
+async function handleEdit(row: Api.Project.ProjectTask) {
+  const detail = await getTaskDetail(row);
+
+  if (!detail.allowEdit) {
+    window.$message?.warning('当前任务状态不允许编辑');
+    return;
+  }
+
+  operateMode.value = 'edit';
+  currentTask.value = detail;
+  operateVisible.value = true;
+}
+
+async function handleDetail(row: Api.Project.ProjectTask) {
+  currentTask.value = await getTaskDetail(row);
+  detailVisible.value = true;
+}
+
+async function handleStatusAction(row: Api.Project.ProjectTask, action: TaskStatusAction | null) {
+  const detail = await getTaskDetail(row);
+  const targetAction = action || detail.availableActions[0] || null;
+
+  if (!targetAction) {
+    window.$message?.warning('当前任务暂无可用状态操作');
+    return;
+  }
+
+  if (shouldRequireTaskProgressBeforeComplete(targetAction, detail)) {
+    window.$message?.warning('完成任务前请先将进度调整为 100%');
+    return;
+  }
+
+  currentTask.value = detail;
+  currentStatusAction.value = targetAction;
+  statusActionVisible.value = true;
+}
+
+async function handleOperateSubmit(payload: Api.Project.SaveProjectTaskParams) {
+  if (!props.execution) {
+    return;
+  }
+
+  if (operateMode.value !== 'create' && !currentTask.value) {
+    return;
+  }
+
+  const result =
+    operateMode.value === 'create'
+      ? await fetchCreateProjectTask(props.projectId, props.execution.id, payload)
+      : await fetchUpdateProjectTask(props.projectId, props.execution.id, {
+          taskId: currentTask.value!.id,
+          data: payload
+        });
+
+  if (result.error) {
+    return;
+  }
+
+  if (operateMode.value === 'create') {
+    window.$message?.success('任务创建成功');
+  } else {
+    window.$message?.success('任务更新成功');
+  }
+
+  operateVisible.value = false;
+  await getData();
+}
+
+async function handleStatusSubmit(reason: string | null) {
+  if (!props.execution || !currentTask.value || !currentStatusAction.value) {
+    return;
+  }
+
+  const result = await fetchChangeProjectTaskStatus(props.projectId, props.execution.id, {
+    taskId: currentTask.value.id,
+    data: {
+      actionCode: currentStatusAction.value.actionCode,
+      reason
+    }
+  });
+
+  if (result.error) {
+    return;
+  }
+
+  window.$message?.success('任务状态已更新');
+  statusActionVisible.value = false;
+  await Promise.all([getData(), loadTaskStatusBoard()]);
+}
+
+async function loadTaskStatusBoard() {
+  if (!canLoadTasks.value) {
+    taskStatusBoard.value = null;
+    return;
+  }
+
+  const { error, data: board } = await fetchGetProjectTaskStatusBoard(
+    props.projectId,
+    executionId.value,
+    createStatusBoardParams()
+  );
+
+  taskStatusBoard.value = error || !board ? null : board;
+}
+
+watch(
+  () => props.execution?.id,
+  async value => {
+    resetSearchParams();
+
+    if (!value) {
+      data.value = [];
+      taskStatusBoard.value = null;
+      return;
+    }
+
+    await Promise.all([getDataByPage(1), loadTaskStatusBoard()]);
+  },
+  { immediate: true }
+);
+</script>
+
+<template>
+  <section class="task-workspace">
+    <header class="task-workspace__header">
+      <h3 class="task-workspace__title">任务</h3>
+
+      <div class="task-workspace__actions">
+        <ElSegmented v-model="viewMode" class="task-view-toggle" size="default" :options="viewModeOptions">
+          <template #default="{ item }">
+            <span class="task-view-toggle__item">
+              <component :is="item.icon" class="task-view-toggle__icon" />
+              <span>{{ item.label }}</span>
+            </span>
+          </template>
+        </ElSegmented>
+        <ElButton v-if="canCreate" type="primary" :icon="Plus" :disabled="!execution" @click="handleCreate">
+          新增
+        </ElButton>
+      </div>
+    </header>
+
+    <TaskSearch
+      :model="searchParams"
+      :user-options="ownerOptions"
+      :status-options="taskStatusBoard?.items || []"
+      :disabled="!execution"
+      @search="handleSearch"
+      @reset="handleReset"
+    />
+
+    <ElEmpty v-if="!execution" class="task-workspace__empty" description="请选择左侧执行项" />
+    <TaskTableView
+      v-else-if="viewMode === 'table'"
+      :data="data"
+      :loading="loading"
+      :pagination="mobilePagination"
+      :can-update="canUpdate"
+      :can-change-status="canChangeStatus"
+      @detail="handleDetail"
+      @edit="handleEdit"
+      @status-action="handleStatusAction"
+    />
+    <TaskBoardView
+      v-else
+      :data="data"
+      :loading="loading"
+      :status-board="taskStatusBoard"
+      :can-update="canUpdate"
+      :can-change-status="canChangeStatus"
+      @detail="handleDetail"
+      @edit="handleEdit"
+      @status-action="handleStatusAction"
+    />
+
+    <div v-if="execution && viewMode === 'board' && mobilePagination.total" class="task-workspace__board-pagination">
+      <ElPagination
+        background
+        layout="total, sizes, prev, pager, next"
+        v-bind="mobilePagination"
+        @current-change="mobilePagination['current-change']"
+        @size-change="mobilePagination['size-change']"
+      />
+    </div>
+
+    <TaskOperateDialog
+      v-model:visible="operateVisible"
+      :mode="operateMode"
+      :row-data="currentTask"
+      :user-options="ownerOptions"
+      :task-options="taskOptions"
+      @submit="handleOperateSubmit"
+    />
+
+    <TaskDetailDialog v-model:visible="detailVisible" :row-data="currentTask" />
+
+    <StatusActionDialog
+      v-model:visible="statusActionVisible"
+      :title="statusActionTitle"
+      :action="currentStatusAction"
+      @submit="handleStatusSubmit"
+    />
+  </section>
+</template>
+
+<style scoped lang="scss">
+.task-workspace {
+  display: flex;
+  min-width: 0;
+  min-height: 0;
+  flex: 1;
+  flex-direction: column;
+  gap: 12px;
+  height: 100%;
+  padding: 12px;
+  border: 1px solid rgb(226 232 240 / 92%);
+  border-radius: 8px;
+  background-color: #fff;
+}
+
+.task-workspace__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  min-height: 40px;
+}
+
+.task-workspace__title {
+  margin: 0;
+  color: rgb(15 23 42 / 94%);
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 1.4;
+}
+
+.task-workspace__actions {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex: 0 0 auto;
+}
+
+.task-view-toggle {
+  --el-segmented-item-selected-bg-color: var(--el-color-primary);
+  --el-segmented-item-selected-color: #fff;
+}
+
+.task-view-toggle__item {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 0 4px;
+  font-weight: 500;
+}
+
+.task-view-toggle__icon {
+  font-size: 16px;
+}
+
+.task-workspace__board-pagination {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.task-workspace__empty {
+  flex: 1;
+  border: 1px dashed rgb(203 213 225 / 92%);
+  border-radius: 8px;
+  background-color: #fff;
+}
+</style>

src/views/project/project/execution/shared.ts

@@ -0,0 +1,119 @@
+import dayjs from 'dayjs';
+import { getStatusTagType } from '@/constants/status-tag';
+
+type ExecutionStatusCode = Api.Project.ProjectExecutionStatusCode;
+type TaskStatusCode = Api.Project.ProjectTaskStatusCode;
+type ExecutionMemberActionType = Api.Project.ExecutionMemberActionType;
+
+export const executionMemberActionNameMap: Record<ExecutionMemberActionType, string> = {
+  join: '加入',
+  inactive: '失效',
+  owner_transfer_in: '转入负责人',
+  owner_transfer_out: '转出负责人'
+};
+
+export const EXECUTION_STATUS_ORDER = [
+  'pending',
+  'active',
+  'paused',
+  'completed',
+  'cancelled'
+] as const satisfies readonly ExecutionStatusCode[];
+
+export const TASK_STATUS_ORDER = [
+  'pending',
+  'active',
+  'blocked',
+  'completed',
+  'cancelled'
+] as const satisfies readonly TaskStatusCode[];
+
+export const executionStatusFallbackNameMap: Record<ExecutionStatusCode, string> = {
+  pending: '待开始',
+  active: '进行中',
+  paused: '已暂停',
+  completed: '已完成',
+  cancelled: '已取消'
+};
+
+export const taskStatusFallbackNameMap: Record<TaskStatusCode, string> = {
+  pending: '待开始',
+  active: '进行中',
+  blocked: '已阻塞',
+  completed: '已完成',
+  cancelled: '已取消'
+};
+
+export function getExecutionStatusTagType(statusCode: ExecutionStatusCode | string) {
+  return getStatusTagType('projectExecution', statusCode);
+}
+
+export function getTaskStatusTagType(statusCode: TaskStatusCode | string) {
+  return getStatusTagType('projectTask', statusCode);
+}
+
+export function getExecutionMemberActionTagType(actionType: ExecutionMemberActionType | string) {
+  return getStatusTagType('executionMember', actionType);
+}
+
+export function getExecutionMemberActionName(actionType: ExecutionMemberActionType | string) {
+  return executionMemberActionNameMap[actionType as ExecutionMemberActionType] || actionType;
+}
+
+export function formatDate(value: string | null | undefined) {
+  const parsed = dayjs(value);
+
+  return parsed.isValid() ? parsed.format('YYYY-MM-DD') : '--';
+}
+
+export function formatDateTime(value: string | null | undefined) {
+  const parsed = dayjs(value);
+
+  return parsed.isValid() ? parsed.format('YYYY-MM-DD HH:mm:ss') : '--';
+}
+
+export function formatDateRange(startDate: string | null | undefined, endDate: string | null | undefined) {
+  const startText = formatDate(startDate);
+  const endText = formatDate(endDate);
+
+  if (startText === '--' && endText === '--') {
+    return '--';
+  }
+
+  return `${startText} 至 ${endText}`;
+}
+
+export function getExecutionStatusName(execution: Pick<Api.Project.ProjectExecution, 'statusCode' | 'statusName'>) {
+  return execution.statusName?.trim() || executionStatusFallbackNameMap[execution.statusCode] || execution.statusCode;
+}
+
+export function getTaskStatusName(task: Pick<Api.Project.ProjectTask, 'statusCode' | 'statusName'>) {
+  return task.statusName?.trim() || taskStatusFallbackNameMap[task.statusCode] || task.statusCode;
+}
+
+export function getProgressText(progressRate: number | null | undefined) {
+  if (typeof progressRate !== 'number' || !Number.isFinite(progressRate)) {
+    return '0%';
+  }
+
+  return `${Math.min(100, Math.max(0, progressRate))}%`;
+}
+
+export function isActiveExecutionMember(member: Pick<Api.Project.ExecutionMember, 'joinedAt' | 'removedAt'>) {
+  if (!member.removedAt) {
+    return true;
+  }
+
+  if (!member.joinedAt) {
+    return false;
+  }
+
+  return dayjs(member.joinedAt).isAfter(dayjs(member.removedAt));
+}
+
+export function shouldRequireTaskProgressBeforeComplete(
+  action: Api.Project.LifecycleAction<Api.Project.ProjectTaskActionCode>,
+  task: Api.Project.ProjectTask
+) {
+  return action.actionCode === 'complete' && task.progressRate !== 100;
+}

src/views/project/project/overview/homepage.ts

@@ -0,0 +1,401 @@
+import dayjs from 'dayjs';
+import { getProjectStatusLabel } from '../../shared/project-master-data';
+
+export interface ProjectHomepageMetric {
+  label: string;
+  value: string;
+  hint: string;
+}
+
+export interface ProjectHomepageFact {
+  label: string;
+  value: string;
+  fullWidth?: boolean;
+}
+
+export interface ProjectHomepageBanner {
+  identity: {
+    name: string;
+    code: string;
+    directionCode: string;
+    projectType: string;
+    statusCode: Api.Project.ProjectStatusCode | null;
+    statusLabel: string;
+    description: string;
+    facts: ProjectHomepageFact[];
+  };
+  metrics: ProjectHomepageMetric[];
+}
+
+export interface ProjectHomepageBannerSource {
+  project: Api.Project.Project | null;
+  settings: Api.Project.ProjectSettings | null;
+  members: readonly Api.Project.ProjectMember[];
+  latestActivityTime?: string | null;
+}
+
+export interface ProjectHomepageTimelineItem {
+  key: string;
+  tag: '对象' | '状态' | '团队' | '计划';
+  title: string;
+  content: string;
+  time: string;
+  tone: 'sky' | 'emerald' | 'amber' | 'rose' | 'slate';
+}
+
+export interface ProjectScheduleOverview {
+  metrics: ProjectHomepageMetric[];
+  dates: Array<{
+    label: string;
+    value: string;
+  }>;
+}
+
+export interface ProjectTeamOverview {
+  metrics: ProjectHomepageMetric[];
+  roles: Array<{
+    label: string;
+    value: string;
+  }>;
+}
+
+export interface ProjectHomepageExtensionModule {
+  key: 'milestone' | 'risk' | 'document';
+  title: string;
+  description: string;
+  items: string[];
+}
+
+function getTimeValue(value: string | null | undefined) {
+  const parsed = dayjs(value);
+
+  return parsed.isValid() ? parsed.valueOf() : 0;
+}
+
+function formatDate(value: string | null | undefined) {
+  const parsed = dayjs(value);
+
+  return parsed.isValid() ? parsed.format('YYYY-MM-DD') : '--';
+}
+
+function formatDateTime(value: string | null | undefined) {
+  const parsed = dayjs(value);
+
+  return parsed.isValid() ? parsed.format('YYYY-MM-DD HH:mm') : '--';
+}
+
+function getStatusLabel(status: Api.Project.ProjectStatusCode | null | undefined) {
+  return status ? getProjectStatusLabel(status) || '--' : '--';
+}
+
+function getActiveMembers(members: readonly Api.Project.ProjectMember[]) {
+  return members.filter(item => item.status === 0);
+}
+
+function getManagerLabel(
+  project: Api.Project.Project | null,
+  settings: Api.Project.ProjectSettings | null,
+  members: readonly Api.Project.ProjectMember[]
+) {
+  return (
+    settings?.baseInfo.managerUserNickname ||
+    project?.managerUserNickname ||
+    getActiveMembers(members).find(item => item.managerFlag)?.userNickname ||
+    '--'
+  );
+}
+
+function getRoleSummary(members: readonly Api.Project.ProjectMember[]) {
+  const activeMembers = getActiveMembers(members);
+
+  if (!activeMembers.length) {
+    return '--';
+  }
+
+  const roleCounter = new Map<string, number>();
+
+  activeMembers.forEach(member => {
+    const roleName = member.roleName || '未命名角色';
+
+    roleCounter.set(roleName, (roleCounter.get(roleName) || 0) + 1);
+  });
+
+  return Array.from(roleCounter.entries())
+    .sort((left, right) => {
+      const leftWeight = left[0].includes('经理') || left[0].includes('负责人') ? 0 : 1;
+      const rightWeight = right[0].includes('经理') || right[0].includes('负责人') ? 0 : 1;
+
+      if (leftWeight !== rightWeight) {
+        return leftWeight - rightWeight;
+      }
+
+      return left[0].localeCompare(right[0], 'zh-CN');
+    })
+    .map(([roleName, count]) => `${roleName} ${count} 人`)
+    .join(' / ');
+}
+
+function getPlanRangeLabel(project: Api.Project.Project | null) {
+  const start = formatDate(project?.plannedStartDate);
+  const end = formatDate(project?.plannedEndDate);
+
+  if (start === '--' && end === '--') {
+    return '--';
+  }
+
+  return `${start} 至 ${end}`;
+}
+
+function getProgressValue(project: Api.Project.Project | null) {
+  const progress = project?.progressRate ?? 0;
+
+  if (!Number.isFinite(progress)) {
+    return 0;
+  }
+
+  return Math.min(100, Math.max(0, progress));
+}
+
+function resolveLatestTimelineTime(
+  project: Api.Project.Project | null,
+  settings: Api.Project.ProjectSettings | null,
+  members: readonly Api.Project.ProjectMember[]
+) {
+  const timeValues = [
+    project?.createTime,
+    project?.updateTime,
+    settings?.lifecycle.lastStatusReason ? project?.updateTime : null,
+    project?.actualStartDate,
+    project?.actualEndDate,
+    ...members.flatMap(member => [member.joinedTime, member.leftTime || null])
+  ];
+
+  const latestValue = timeValues.reduce((latest, current) => Math.max(latest, getTimeValue(current)), 0);
+
+  return latestValue ? dayjs(latestValue).format('YYYY-MM-DD HH:mm') : '--';
+}
+
+// 待重构：拆 helper 以降低复杂度，暂以 disable 注释临时放行
+// eslint-disable-next-line complexity
+function buildProjectHomepageBannerIdentity(source: ProjectHomepageBannerSource) {
+  const { project, settings, members } = source;
+  const baseInfo = settings?.baseInfo;
+  const statusCode = settings?.lifecycle.statusCode || project?.statusCode || null;
+
+  return {
+    name: project?.projectName || baseInfo?.projectName || '--',
+    code: project?.projectCode || baseInfo?.projectCode || '--',
+    directionCode: project?.directionCode || baseInfo?.directionCode || '',
+    projectType: project?.projectType || baseInfo?.projectType || '',
+    statusCode,
+    statusLabel: getStatusLabel(statusCode),
+    description: project?.projectDesc?.trim() || baseInfo?.projectDesc?.trim() || '',
+    facts: [
+      { label: '所属产品', value: project?.productName || baseInfo?.productName || project?.productId || '--' },
+      { label: '项目经理', value: getManagerLabel(project, settings, members) },
+      { label: '角色摘要', value: getRoleSummary(members), fullWidth: true }
+    ]
+  } satisfies ProjectHomepageBanner['identity'];
+}
+
+function buildProjectHomepageBannerMetrics(source: ProjectHomepageBannerSource) {
+  const activeMembers = getActiveMembers(source.members);
+  const latestTimelineTime =
+    source.latestActivityTime?.trim() || resolveLatestTimelineTime(source.project, source.settings, source.members);
+
+  return [
+    {
+      label: '团队人数',
+      value: String(activeMembers.length),
+      hint: '当前处于有效状态的项目成员数'
+    },
+    {
+      label: '项目进度',
+      value: `${getProgressValue(source.project)}%`,
+      hint: '项目详情中维护的当前进度百分比'
+    },
+    {
+      label: '计划周期',
+      value: getPlanRangeLabel(source.project),
+      hint: '项目计划开始和计划结束日期'
+    },
+    {
+      label: '最近动态时间',
+      value: latestTimelineTime,
+      hint: '对象、状态、计划或团队最近一次可确认变动时间'
+    }
+  ] satisfies ProjectHomepageMetric[];
+}
+
+export function buildProjectHomepageBanner(source: ProjectHomepageBannerSource): ProjectHomepageBanner {
+  return {
+    identity: buildProjectHomepageBannerIdentity(source),
+    metrics: buildProjectHomepageBannerMetrics(source)
+  };
+}
+
+export function buildProjectHomepageTimeline(
+  project: Api.Project.Project | null,
+  settings: Api.Project.ProjectSettings | null,
+  members: readonly Api.Project.ProjectMember[]
+) {
+  const items: Array<Omit<ProjectHomepageTimelineItem, 'time'> & { time: string | null | undefined }> = [];
+
+  if (project?.createTime) {
+    items.push({
+      key: `project-create-${project.id}`,
+      tag: '对象',
+      title: '创建项目',
+      content: `项目 ${project.projectName || project.projectCode} 已创建并进入项目管理域。`,
+      time: project.createTime,
+      tone: 'sky'
+    });
+  }
+
+  const statusReason =
+    settings?.lifecycle.lastStatusReason || settings?.baseInfo.lastStatusReason || project?.lastStatusReason;
+
+  if (project?.updateTime && project?.statusCode && statusReason) {
+    const toneMap: Record<Api.Project.ProjectStatusCode, ProjectHomepageTimelineItem['tone']> = {
+      pending: 'slate',
+      active: 'emerald',
+      paused: 'amber',
+      completed: 'emerald',
+      cancelled: 'rose',
+      archived: 'slate'
+    };
+
+    items.push({
+      key: `project-status-${project.id}-${project.updateTime}`,
+      tag: '状态',
+      title: `状态调整为${getStatusLabel(project.statusCode)}`,
+      content: statusReason,
+      time: project.updateTime,
+      tone: toneMap[project.statusCode]
+    });
+  }
+
+  if (project?.actualStartDate) {
+    items.push({
+      key: `project-actual-start-${project.id}`,
+      tag: '计划',
+      title: '实际开始',
+      content: '项目已记录实际开始日期，进入真实推进阶段。',
+      time: project.actualStartDate,
+      tone: 'emerald'
+    });
+  }
+
+  if (project?.actualEndDate) {
+    items.push({
+      key: `project-actual-end-${project.id}`,
+      tag: '计划',
+      title: '实际结束',
+      content: '项目已记录实际结束日期，可结合状态进入完成或归档处理。',
+      time: project.actualEndDate,
+      tone: 'slate'
+    });
+  }
+
+  members.forEach(member => {
+    if (member.joinedTime) {
+      items.push({
+        key: `member-join-${member.id}`,
+        tag: '团队',
+        title: '成员加入',
+        content: `${member.userNickname} 以 ${member.roleName || '未命名角色'} 身份加入当前项目。`,
+        time: member.joinedTime,
+        tone: member.managerFlag ? 'emerald' : 'sky'
+      });
+    }
+
+    if (member.status === 1 && member.leftTime) {
+      items.push({
+        key: `member-leave-${member.id}`,
+        tag: '团队',
+        title: '成员移出',
+        content: `${member.userNickname} 已退出当前项目团队。`,
+        time: member.leftTime,
+        tone: 'rose'
+      });
+    }
+  });
+
+  return items
+    .filter(item => getTimeValue(item.time) > 0)
+    .sort((left, right) => getTimeValue(right.time) - getTimeValue(left.time))
+    .slice(0, 8)
+    .map(item => ({
+      ...item,
+      time: formatDateTime(item.time)
+    })) satisfies ProjectHomepageTimelineItem[];
+}
+
+export function buildProjectScheduleOverview(project: Api.Project.Project | null): ProjectScheduleOverview {
+  const progressValue = getProgressValue(project);
+  const hasActualRange = Boolean(project?.actualStartDate || project?.actualEndDate);
+
+  return {
+    metrics: [
+      {
+        label: '当前进度',
+        value: `${progressValue}%`,
+        hint: '由项目详情维护的进度字段直接呈现'
+      },
+      {
+        label: '日期完整度',
+        value: hasActualRange ? '已记录实际日期' : '以计划日期为主',
+        hint: '用于判断当前项目计划与执行日期是否闭环'
+      }
+    ],
+    dates: [
+      { label: '计划开始', value: formatDate(project?.plannedStartDate) },
+      { label: '计划结束', value: formatDate(project?.plannedEndDate) },
+      { label: '实际开始', value: formatDate(project?.actualStartDate) },
+      { label: '实际结束', value: formatDate(project?.actualEndDate) }
+    ]
+  };
+}
+
+export function buildProjectTeamOverview(members: readonly Api.Project.ProjectMember[]): ProjectTeamOverview {
+  const activeMembers = getActiveMembers(members);
+  const inactiveMembers = members.filter(item => item.status === 1);
+  const manager = activeMembers.find(item => item.managerFlag);
+  const roleCounter = new Map<string, number>();
+
+  activeMembers.forEach(member => {
+    const roleName = member.roleName || '未命名角色';
+
+    roleCounter.set(roleName, (roleCounter.get(roleName) || 0) + 1);
+  });
+
+  return {
+    metrics: [
+      {
+        label: '有效成员',
+        value: String(activeMembers.length),
+        hint: '当前仍在项目团队中的成员数'
+      },
+      {
+        label: '已退出成员',
+        value: String(inactiveMembers.length),
+        hint: '历史加入后已移出的项目成员数'
+      },
+      {
+        label: '项目经理',
+        value: manager?.userNickname || '--',
+        hint: '当前团队中标记为项目负责人的成员'
+      },
+      {
+        label: '角色类型',
+        value: String(roleCounter.size),
+        hint: '有效成员覆盖的角色种类数'
+      }
+    ],
+    roles: Array.from(roleCounter.entries()).map(([label, value]) => ({ label, value: String(value) }))
+  };
+}
+
+export function getProjectHomepageExtensionModules(modules: readonly ProjectHomepageExtensionModule[]) {
+  return [...modules];
+}

src/views/project/project/overview/index.vue

@@ -0,0 +1,785 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+import { RDMS_OBJECT_DIRECTION_DICT_CODE, RDMS_PROJECT_TYPE_DICT_CODE } from '@/constants/dict';
+import { fetchGetProject, fetchGetProjectMembers, fetchGetProjectSettings } from '@/service/api';
+import { useDict } from '@/hooks/business/dict';
+import { useCurrentProject } from '../../shared/use-current-project';
+import {
+  buildProjectHomepageBanner,
+  buildProjectHomepageTimeline,
+  buildProjectScheduleOverview,
+  buildProjectTeamOverview,
+  getProjectHomepageExtensionModules
+} from './homepage';
+import { projectHomepageExtensionMock } from './mock';
+
+defineOptions({ name: 'ProjectOverview' });
+
+const { currentObjectId, currentProject } = useCurrentProject();
+const { getLabel: getDirectionLabel } = useDict(RDMS_OBJECT_DIRECTION_DICT_CODE);
+const { getLabel: getProjectTypeLabel } = useDict(RDMS_PROJECT_TYPE_DICT_CODE);
+
+const pageLoading = ref(false);
+const projectDetail = ref<Api.Project.Project | null>(null);
+const settings = ref<Api.Project.ProjectSettings | null>(null);
+const members = ref<Api.Project.ProjectMember[]>([]);
+const latestActivityTime = ref('');
+
+const timelineItems = computed(() => buildProjectHomepageTimeline(projectDetail.value, settings.value, members.value));
+const scheduleOverview = computed(() => buildProjectScheduleOverview(projectDetail.value));
+const teamOverview = computed(() => buildProjectTeamOverview(members.value));
+const homepageBanner = computed(() =>
+  buildProjectHomepageBanner({
+    project: projectDetail.value,
+    settings: settings.value,
+    members: members.value,
+    latestActivityTime: latestActivityTime.value
+  })
+);
+const extensionModules = computed(() => getProjectHomepageExtensionModules(projectHomepageExtensionMock));
+const directionLabel = computed(() => getDirectionLabel(homepageBanner.value.identity.directionCode, '--'));
+const projectTypeLabel = computed(() => getProjectTypeLabel(homepageBanner.value.identity.projectType, '--'));
+const bannerFacts = computed(() => [
+  {
+    label: '项目方向',
+    value: directionLabel.value,
+    fullWidth: false
+  },
+  {
+    label: '项目类型',
+    value: projectTypeLabel.value,
+    fullWidth: false
+  },
+  ...homepageBanner.value.identity.facts
+]);
+const progressValue = computed(() => projectDetail.value?.progressRate ?? 0);
+const bannerStatusClass = computed(() => {
+  const statusCode = homepageBanner.value.identity.statusCode;
+
+  return statusCode ? `project-homepage-banner--${statusCode}` : 'project-homepage-banner--default';
+});
+const bannerStatusWordClass = computed(() => {
+  const statusCode = homepageBanner.value.identity.statusCode;
+
+  return statusCode
+    ? `project-homepage-banner__status-word--${statusCode}`
+    : 'project-homepage-banner__status-word--default';
+});
+
+async function loadOverviewData(objectId: string) {
+  pageLoading.value = true;
+
+  try {
+    const [projectResult, settingsResult, membersResult] = await Promise.all([
+      fetchGetProject(objectId),
+      fetchGetProjectSettings(objectId),
+      fetchGetProjectMembers(objectId)
+    ]);
+
+    projectDetail.value = projectResult.error ? null : projectResult.data || null;
+    settings.value = settingsResult.error ? null : settingsResult.data || null;
+    members.value = membersResult.error ? [] : membersResult.data || [];
+    latestActivityTime.value = timelineItems.value[0]?.time || '';
+  } finally {
+    pageLoading.value = false;
+  }
+}
+
+watch(
+  () => currentObjectId.value,
+  async objectId => {
+    if (!objectId) {
+      projectDetail.value = null;
+      settings.value = null;
+      members.value = [];
+      latestActivityTime.value = '';
+      return;
+    }
+
+    await loadOverviewData(objectId);
+  },
+  { immediate: true }
+);
+</script>
+
+<template>
+  <div v-loading="pageLoading" class="project-homepage">
+    <section class="project-homepage-banner" :class="bannerStatusClass">
+      <div class="project-homepage-banner__identity">
+        <div class="project-homepage-banner__title-group">
+          <div class="project-homepage-banner__title-main min-w-0">
+            <div class="project-homepage-banner__title-row">
+              <h1 class="project-homepage-banner__title">
+                {{ homepageBanner.identity.name || currentProject?.projectName || '--' }}
+              </h1>
+              <span class="project-homepage-banner__status-word" :class="bannerStatusWordClass">
+                {{ homepageBanner.identity.statusLabel }}
+              </span>
+            </div>
+            <div class="project-homepage-banner__subtitle">
+              <span class="project-homepage-banner__code">编号 {{ homepageBanner.identity.code }}</span>
+              <p v-if="homepageBanner.identity.description" class="project-homepage-banner__description">
+                {{ homepageBanner.identity.description }}
+              </p>
+            </div>
+          </div>
+        </div>
+
+        <div class="project-homepage-banner__facts">
+          <div
+            v-for="item in bannerFacts"
+            :key="item.label"
+            class="project-homepage-banner__fact"
+            :class="{ 'project-homepage-banner__fact--full': item.fullWidth }"
+          >
+            <span class="project-homepage-banner__fact-label">{{ item.label }}</span>
+            <strong class="project-homepage-banner__fact-value">{{ item.value }}</strong>
+          </div>
+        </div>
+      </div>
+
+      <div class="project-homepage-banner__metrics">
+        <article v-for="item in homepageBanner.metrics" :key="item.label" class="project-homepage-banner__metric">
+          <span class="project-homepage-banner__metric-label">{{ item.label }}</span>
+          <strong class="project-homepage-banner__metric-value">{{ item.value }}</strong>
+        </article>
+      </div>
+    </section>
+
+    <section class="project-homepage-main">
+      <ElCard class="project-homepage-panel card-wrapper">
+        <template #header>
+          <div>
+            <h3 class="project-homepage-panel__title">项目动态时间线</h3>
+            <p class="project-homepage-panel__desc">
+              先展示项目创建、状态动作、实际日期和团队变化，后续可替换为专用动态接口。
+            </p>
+          </div>
+        </template>
+
+        <div v-if="timelineItems.length" class="project-homepage-timeline">
+          <article v-for="item in timelineItems" :key="item.key" class="project-homepage-timeline__item">
+            <div class="project-homepage-timeline__rail">
+              <span class="project-homepage-timeline__dot" :class="`project-homepage-timeline__dot--${item.tone}`" />
+              <span class="project-homepage-timeline__line" />
+            </div>
+
+            <div class="project-homepage-timeline__content">
+              <div class="project-homepage-timeline__meta">
+                <ElTag effect="plain" size="small">{{ item.tag }}</ElTag>
+                <span class="project-homepage-timeline__time">{{ item.time }}</span>
+              </div>
+              <p class="project-homepage-timeline__sentence">
+                <strong class="project-homepage-timeline__headline">{{ item.title }}</strong>
+                <span>{{ item.content }}</span>
+              </p>
+            </div>
+          </article>
+        </div>
+
+        <ElEmpty v-else description="当前暂无可展示的项目动态" :image-size="88" />
+      </ElCard>
+
+      <div class="project-homepage-main__aside">
+        <ElCard class="project-homepage-panel card-wrapper">
+          <template #header>
+            <div>
+              <h3 class="project-homepage-panel__title">计划进展概览</h3>
+              <p class="project-homepage-panel__desc">先看当前进度、计划周期和实际执行日期是否已经闭环。</p>
+            </div>
+          </template>
+
+          <div class="project-homepage-schedule">
+            <div class="project-homepage-schedule__progress">
+              <strong>{{ progressValue }}%</strong>
+              <ElProgress
+                :percentage="progressValue"
+                :stroke-width="8"
+                :show-text="false"
+                :color="progressValue >= 100 ? '#10b981' : progressValue >= 50 ? '#3b82f6' : '#6366f1'"
+              />
+            </div>
+
+            <div class="project-homepage-summary-metrics">
+              <article
+                v-for="item in scheduleOverview.metrics"
+                :key="item.label"
+                class="project-homepage-summary-metrics__item"
+              >
+                <span class="project-homepage-summary-metrics__label">{{ item.label }}</span>
+                <strong class="project-homepage-summary-metrics__value">{{ item.value }}</strong>
+              </article>
+            </div>
+
+            <div class="project-homepage-schedule__dates">
+              <div v-for="item in scheduleOverview.dates" :key="item.label" class="project-homepage-schedule__date">
+                <span>{{ item.label }}</span>
+                <strong>{{ item.value }}</strong>
+              </div>
+            </div>
+          </div>
+        </ElCard>
+
+        <ElCard class="project-homepage-panel card-wrapper">
+          <template #header>
+            <div>
+              <h3 class="project-homepage-panel__title">项目团队概览</h3>
+              <p class="project-homepage-panel__desc">承接当前成员规模、负责人和角色结构，和设置页团队维护分开表达。</p>
+            </div>
+          </template>
+
+          <div class="project-homepage-team">
+            <div class="project-homepage-summary-metrics">
+              <article
+                v-for="item in teamOverview.metrics"
+                :key="item.label"
+                class="project-homepage-summary-metrics__item"
+              >
+                <span class="project-homepage-summary-metrics__label">{{ item.label }}</span>
+                <strong class="project-homepage-summary-metrics__value">{{ item.value }}</strong>
+              </article>
+            </div>
+
+            <div v-if="teamOverview.roles.length" class="project-homepage-team__roles">
+              <div v-for="item in teamOverview.roles" :key="item.label" class="project-homepage-team__role">
+                <span>{{ item.label }}</span>
+                <strong>{{ item.value }}</strong>
+              </div>
+            </div>
+
+            <ElEmpty v-else description="当前暂无有效团队成员" :image-size="72" />
+          </div>
+        </ElCard>
+      </div>
+    </section>
+
+    <section class="project-homepage-extension">
+      <ElCard v-for="module in extensionModules" :key="module.key" class="project-homepage-panel card-wrapper">
+        <template #header>
+          <div>
+            <h3 class="project-homepage-panel__title">{{ module.title }}</h3>
+            <p class="project-homepage-panel__desc">{{ module.description }}</p>
+          </div>
+        </template>
+
+        <div class="project-homepage-extension__list">
+          <div v-for="item in module.items" :key="item" class="project-homepage-extension__item">
+            <span class="project-homepage-extension__dot" />
+            <span>{{ item }}</span>
+          </div>
+        </div>
+      </ElCard>
+    </section>
+  </div>
+</template>
+
+<style scoped>
+.project-homepage {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.project-homepage-banner {
+  display: grid;
+  grid-template-columns: minmax(0, 1.55fr) minmax(320px, 1fr);
+  gap: 16px;
+  padding: 24px;
+  border: 1px solid rgb(226 232 240 / 92%);
+  border-radius: 24px;
+  background:
+    radial-gradient(circle at top left, rgb(14 116 144 / 14%), transparent 34%),
+    radial-gradient(circle at bottom right, rgb(15 118 110 / 10%), transparent 28%),
+    linear-gradient(135deg, rgb(255 255 255 / 99%), rgb(248 250 252 / 98%));
+}
+
+.project-homepage-banner--default {
+  border-color: rgb(226 232 240 / 92%);
+  background:
+    radial-gradient(circle at top left, rgb(14 116 144 / 14%), transparent 34%),
+    radial-gradient(circle at bottom right, rgb(15 118 110 / 10%), transparent 28%),
+    linear-gradient(135deg, rgb(255 255 255 / 99%), rgb(248 250 252 / 98%));
+}
+
+.project-homepage-banner--pending,
+.project-homepage-banner--archived {
+  border-color: rgb(203 213 225 / 92%);
+  background:
+    radial-gradient(circle at top left, rgb(100 116 139 / 14%), transparent 34%),
+    radial-gradient(circle at bottom right, rgb(148 163 184 / 10%), transparent 26%),
+    linear-gradient(135deg, rgb(248 250 252 / 99%), rgb(255 255 255 / 98%));
+}
+
+.project-homepage-banner--active,
+.project-homepage-banner--completed {
+  border-color: rgb(167 243 208 / 88%);
+  background:
+    radial-gradient(circle at top left, rgb(5 150 105 / 16%), transparent 32%),
+    radial-gradient(circle at bottom right, rgb(16 185 129 / 14%), transparent 26%),
+    linear-gradient(135deg, rgb(236 253 245 / 99%), rgb(255 255 255 / 98%));
+}
+
+.project-homepage-banner--paused {
+  border-color: rgb(253 230 138 / 90%);
+  background:
+    radial-gradient(circle at top left, rgb(245 158 11 / 18%), transparent 32%),
+    radial-gradient(circle at bottom right, rgb(251 191 36 / 16%), transparent 24%),
+    linear-gradient(135deg, rgb(255 251 235 / 99%), rgb(255 255 255 / 98%));
+}
+
+.project-homepage-banner--cancelled {
+  border-color: rgb(254 205 211 / 92%);
+  background:
+    radial-gradient(circle at top left, rgb(244 63 94 / 16%), transparent 32%),
+    radial-gradient(circle at bottom right, rgb(251 113 133 / 14%), transparent 24%),
+    linear-gradient(135deg, rgb(255 241 242 / 99%), rgb(255 255 255 / 98%));
+}
+
+.project-homepage-banner__identity {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.project-homepage-banner__title-group {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+}
+
+.project-homepage-banner__title-main {
+  display: flex;
+  min-width: 0;
+  flex: 1;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.project-homepage-banner__title-row {
+  display: flex;
+  min-width: 0;
+  align-items: baseline;
+  gap: 14px;
+}
+
+.project-homepage-banner__code {
+  margin: 0;
+  color: rgb(14 116 144 / 92%);
+  font-size: 13px;
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.project-homepage-banner__title {
+  margin: 0;
+  color: rgb(15 23 42 / 98%);
+  font-size: 34px;
+  line-height: 1.15;
+  letter-spacing: 0;
+}
+
+.project-homepage-banner__subtitle {
+  display: flex;
+  min-width: 0;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 10px 14px;
+}
+
+.project-homepage-banner__description {
+  margin: 0;
+  min-width: 0;
+  color: rgb(71 85 105 / 94%);
+  font-size: 14px;
+  line-height: 1.8;
+}
+
+.project-homepage-banner__status-word {
+  flex-shrink: 0;
+  font-size: 26px;
+  font-weight: 800;
+  line-height: 1;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  user-select: none;
+}
+
+.project-homepage-banner__status-word--default {
+  color: rgb(148 163 184 / 48%);
+}
+
+.project-homepage-banner__status-word--pending,
+.project-homepage-banner__status-word--archived {
+  color: transparent;
+  background: linear-gradient(180deg, rgb(71 85 105 / 92%), rgb(148 163 184 / 64%));
+  background-clip: text;
+  text-shadow: 0 10px 24px rgb(100 116 139 / 14%);
+  -webkit-text-fill-color: transparent;
+}
+
+.project-homepage-banner__status-word--active,
+.project-homepage-banner__status-word--completed {
+  color: transparent;
+  background: linear-gradient(180deg, rgb(5 150 105 / 94%), rgb(16 185 129 / 70%));
+  background-clip: text;
+  text-shadow: 0 10px 24px rgb(5 150 105 / 16%);
+  -webkit-text-fill-color: transparent;
+}
+
+.project-homepage-banner__status-word--paused {
+  color: transparent;
+  background: linear-gradient(180deg, rgb(217 119 6 / 94%), rgb(245 158 11 / 70%));
+  background-clip: text;
+  text-shadow: 0 10px 24px rgb(245 158 11 / 16%);
+  -webkit-text-fill-color: transparent;
+}
+
+.project-homepage-banner__status-word--cancelled {
+  color: transparent;
+  background: linear-gradient(180deg, rgb(244 63 94 / 94%), rgb(251 113 133 / 68%));
+  background-clip: text;
+  text-shadow: 0 10px 24px rgb(244 63 94 / 16%);
+  -webkit-text-fill-color: transparent;
+}
+
+.project-homepage-banner__facts {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.project-homepage-banner__fact {
+  display: flex;
+  min-height: 58px;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  padding: 14px 16px;
+  border: 1px solid rgb(226 232 240 / 88%);
+  border-radius: 18px;
+  background-color: rgb(255 255 255 / 78%);
+}
+
+.project-homepage-banner__fact--full {
+  grid-column: 1 / -1;
+  align-items: flex-start;
+}
+
+.project-homepage-banner__fact-label {
+  color: rgb(100 116 139 / 94%);
+  font-size: 13px;
+  white-space: nowrap;
+}
+
+.project-homepage-banner__fact-value {
+  color: rgb(15 23 42 / 96%);
+  font-size: 15px;
+  line-height: 1.6;
+  text-align: right;
+}
+
+.project-homepage-banner__fact--full .project-homepage-banner__fact-value {
+  max-width: 72%;
+  text-align: left;
+}
+
+.project-homepage-banner__metrics {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.project-homepage-banner__metric {
+  display: flex;
+  min-height: 112px;
+  flex-direction: column;
+  justify-content: center;
+  gap: 16px;
+  padding: 18px;
+  border: 1px solid rgb(226 232 240 / 88%);
+  border-radius: 20px;
+  background: linear-gradient(180deg, rgb(255 255 255 / 99%), rgb(241 245 249 / 98%));
+}
+
+.project-homepage-banner__metric-label {
+  color: rgb(100 116 139 / 92%);
+  font-size: 12px;
+}
+
+.project-homepage-banner__metric-value {
+  color: rgb(15 23 42 / 98%);
+  font-size: 28px;
+  line-height: 1.1;
+  letter-spacing: 0;
+  word-break: break-word;
+}
+
+.project-homepage-main {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 16px;
+}
+
+.project-homepage-main__aside {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.project-homepage-panel {
+  overflow: hidden;
+}
+
+.project-homepage-panel__title {
+  margin: 0;
+  color: rgb(15 23 42 / 98%);
+  font-size: 16px;
+  font-weight: 700;
+}
+
+.project-homepage-panel__desc {
+  margin: 4px 0 0;
+  color: rgb(100 116 139 / 92%);
+  font-size: 13px;
+  line-height: 1.7;
+}
+
+.project-homepage-timeline {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.project-homepage-timeline__item {
+  display: grid;
+  grid-template-columns: 20px minmax(0, 1fr);
+  gap: 12px;
+}
+
+.project-homepage-timeline__rail {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.project-homepage-timeline__dot {
+  width: 12px;
+  height: 12px;
+  margin-top: 6px;
+  border-radius: 999px;
+  box-shadow: 0 0 0 4px rgb(255 255 255 / 96%);
+}
+
+.project-homepage-timeline__dot--sky {
+  background-color: rgb(14 165 233 / 88%);
+}
+
+.project-homepage-timeline__dot--emerald {
+  background-color: rgb(5 150 105 / 88%);
+}
+
+.project-homepage-timeline__dot--amber {
+  background-color: rgb(217 119 6 / 88%);
+}
+
+.project-homepage-timeline__dot--rose {
+  background-color: rgb(225 29 72 / 88%);
+}
+
+.project-homepage-timeline__dot--slate {
+  background-color: rgb(100 116 139 / 88%);
+}
+
+.project-homepage-timeline__line {
+  flex: 1;
+  width: 2px;
+  min-height: 30px;
+  margin-top: 4px;
+  background: linear-gradient(180deg, rgb(203 213 225 / 96%), rgb(226 232 240 / 28%));
+}
+
+.project-homepage-timeline__item:last-child .project-homepage-timeline__line {
+  opacity: 0;
+}
+
+.project-homepage-timeline__content {
+  padding: 12px 14px;
+  border: 1px solid rgb(226 232 240 / 92%);
+  border-radius: 16px;
+  background-color: rgb(255 255 255 / 98%);
+}
+
+.project-homepage-timeline__meta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.project-homepage-timeline__time {
+  color: rgb(100 116 139 / 90%);
+  font-size: 12px;
+}
+
+.project-homepage-timeline__sentence {
+  margin: 6px 0 0;
+  color: rgb(71 85 105 / 94%);
+  font-size: 13px;
+  line-height: 1.65;
+}
+
+.project-homepage-timeline__headline {
+  margin-right: 6px;
+  color: rgb(15 23 42 / 98%);
+  font-weight: 600;
+}
+
+.project-homepage-schedule,
+.project-homepage-team {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.project-homepage-schedule__progress {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 18px;
+  border-radius: 18px;
+  background: linear-gradient(180deg, rgb(248 250 252 / 98%), rgb(241 245 249 / 94%));
+}
+
+.project-homepage-schedule__progress strong {
+  color: rgb(15 23 42 / 98%);
+  font-size: 36px;
+  line-height: 1.1;
+}
+
+.project-homepage-summary-metrics {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.project-homepage-summary-metrics__item {
+  display: flex;
+  min-height: 100px;
+  flex-direction: column;
+  justify-content: center;
+  gap: 14px;
+  padding: 14px 16px;
+  border-radius: 18px;
+  background: linear-gradient(180deg, rgb(248 250 252 / 98%), rgb(241 245 249 / 94%));
+}
+
+.project-homepage-summary-metrics__label {
+  color: rgb(100 116 139 / 92%);
+  font-size: 12px;
+}
+
+.project-homepage-summary-metrics__value {
+  color: rgb(15 23 42 / 98%);
+  font-size: 22px;
+  line-height: 1.2;
+  word-break: break-word;
+}
+
+.project-homepage-schedule__dates,
+.project-homepage-team__roles {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.project-homepage-schedule__date,
+.project-homepage-team__role {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 13px 14px;
+  border: 1px solid rgb(226 232 240 / 88%);
+  border-radius: 14px;
+  background-color: rgb(255 255 255 / 96%);
+  color: rgb(51 65 85 / 95%);
+  font-size: 14px;
+}
+
+.project-homepage-schedule__date strong,
+.project-homepage-team__role strong {
+  color: rgb(15 23 42 / 98%);
+  font-size: 18px;
+}
+
+.project-homepage-extension {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 16px;
+}
+
+.project-homepage-extension__list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.project-homepage-extension__item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 13px 14px;
+  border-radius: 16px;
+  background-color: rgb(248 250 252 / 96%);
+  color: rgb(51 65 85 / 95%);
+  font-size: 14px;
+  line-height: 1.7;
+}
+
+.project-homepage-extension__dot {
+  width: 8px;
+  height: 8px;
+  flex-shrink: 0;
+  border-radius: 999px;
+  background-color: rgb(14 116 144 / 88%);
+}
+
+@media (width <= 1280px) {
+  .project-homepage-banner,
+  .project-homepage-main,
+  .project-homepage-extension {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (width <= 768px) {
+  .project-homepage-banner {
+    padding: 18px;
+  }
+
+  .project-homepage-banner__title-row {
+    flex-wrap: wrap;
+  }
+
+  .project-homepage-banner__title {
+    font-size: 28px;
+  }
+
+  .project-homepage-banner__status-word {
+    font-size: 22px;
+  }
+
+  .project-homepage-banner__facts,
+  .project-homepage-banner__metrics,
+  .project-homepage-summary-metrics {
+    grid-template-columns: 1fr;
+  }
+
+  .project-homepage-banner__fact--full .project-homepage-banner__fact-value {
+    max-width: none;
+  }
+}
+</style>

src/views/project/project/overview/mock.ts

@@ -0,0 +1,22 @@
+import type { ProjectHomepageExtensionModule } from './homepage';
+
+export const projectHomepageExtensionMock = [
+  {
+    key: 'milestone',
+    title: '里程碑推进',
+    description: '承接项目阶段目标和关键验收点，后续接入真实里程碑接口后替换当前模块数据。',
+    items: ['项目概览页改版验收', '项目设置与成员维护闭环', '需求执行看板接口接入']
+  },
+  {
+    key: 'risk',
+    title: '风险点管理',
+    description: '预留项目级风险摘要，避免把阻塞、延期和资源风险混在动态时间线里表达。',
+    items: ['项目动态暂由详情和成员记录拼装', '进度字段依赖项目详情手工维护', '里程碑和风险暂未接入专用聚合接口']
+  },
+  {
+    key: 'document',
+    title: '项目资料',
+    description: '用于承接项目说明、交付资料、评审纪要和归档材料，当前先保留正式结构位。',
+    items: ['项目说明与目标范围', '交付物与评审记录', '项目归档材料清单']
+  }
+] satisfies ProjectHomepageExtensionModule[];

src/views/project/project/requirement/index.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+defineOptions({ name: 'ProjectRequirement' });
+</script>
+
+<template>
+  <div class="p-16px">
+    <ElEmpty description="需求池功能开发中..." />
+  </div>
+</template>

src/views/project/project/setting/index.vue

@@ -0,0 +1,506 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+import { useMediaQuery } from '@vueuse/core';
+import { LAYOUT_SCROLL_EL_ID } from '@sa/materials';
+import { objectContextDomainConfigs } from '@/constants/object-context';
+import {
+  fetchChangeProjectStatus,
+  fetchCreateProjectMember,
+  fetchDeleteProject,
+  fetchGetProjectMembers,
+  fetchGetProjectSettings,
+  fetchGetRoleSimpleList,
+  fetchGetUserSimpleList,
+  fetchInactiveProjectMember,
+  fetchUpdateProjectMember,
+  fetchUpdateProjectSettingBaseInfo
+} from '@/service/api';
+import { useObjectContextStore } from '@/store/modules/object-context';
+import { useThemeStore } from '@/store/modules/theme';
+import { useRouterPush } from '@/hooks/common/router';
+import { useCurrentProject } from '../../shared/use-current-project';
+import BaseInfoDialog from './modules/base-info-dialog.vue';
+import MemberOperateDialog from './modules/member-operate-dialog.vue';
+import MemberRemoveDialog from './modules/member-remove-dialog.vue';
+import ProjectDeleteDialog from './modules/project-delete-dialog.vue';
+import SettingAnchorNav from './modules/setting-anchor-nav.vue';
+import SettingBaseInfoCard from './modules/setting-base-info-card.vue';
+import SettingDangerZone from './modules/setting-danger-zone.vue';
+import SettingLifecyclePanel from './modules/setting-lifecycle-panel.vue';
+import SettingTeamPanel from './modules/setting-team-panel.vue';
+import StatusActionDialog from './modules/status-action-dialog.vue';
+import {
+  type ProjectSettingSectionKey,
+  canManageProjectTeam,
+  getProjectSettingSectionKeys,
+  resolveVisibleProjectSettingSectionKey,
+  resolveVisibleProjectSettingSections
+} from './shared';
+
+defineOptions({ name: 'ProjectSetting' });
+
+const objectContextStore = useObjectContextStore();
+const themeStore = useThemeStore();
+const { routerPush } = useRouterPush();
+const { currentObjectId, currentProject } = useCurrentProject();
+const isCompactLayout = useMediaQuery('(max-width: 1280px)');
+
+const projectDomainConfig = objectContextDomainConfigs.find(config => config.domainKey === 'project') || null;
+
+const allAnchorItems = [
+  { key: 'base-info', label: '基础信息' },
+  { key: 'team', label: '团队管理' },
+  { key: 'lifecycle', label: '生命周期管理' },
+  { key: 'danger', label: '危险操作' }
+] as const;
+
+const anchorLabelMap = new Map(allAnchorItems.map(item => [item.key, item.label]));
+
+const sectionIdMap: Record<ProjectSettingSectionKey, string> = {
+  'base-info': 'project-setting-base-info',
+  team: 'project-setting-team',
+  lifecycle: 'project-setting-lifecycle',
+  danger: 'project-setting-danger'
+};
+
+const activeAnchorKey = ref<ProjectSettingSectionKey>('base-info');
+const pageLoading = ref(false);
+const memberLoading = ref(false);
+const baseInfoVisible = ref(false);
+const memberOperateVisible = ref(false);
+const memberRemoveVisible = ref(false);
+const statusActionVisible = ref(false);
+const deleteVisible = ref(false);
+const memberOperateMode = ref<'create' | 'edit'>('create');
+const selectedMember = ref<Api.Project.ProjectMember | null>(null);
+const selectedAction = ref<Api.Project.ProjectLifecycleAction | null>(null);
+
+const settings = ref<Api.Project.ProjectSettings | null>(null);
+const members = ref<Api.Project.ProjectMember[]>([]);
+const roleOptions = ref<Api.SystemManage.RoleSimple[]>([]);
+const userOptions = ref<Api.SystemManage.UserSimple[]>([]);
+const currentManager = computed(() => members.value.find(item => item.managerFlag && item.status === 0) || null);
+const baseInfo = computed(() => settings.value?.baseInfo || null);
+const lifecycle = computed(() => settings.value?.lifecycle || null);
+const canUpdateProject = computed(() => objectContextStore.buttonCodes.includes('project:project:update'));
+const canManageTeam = computed(() => canManageProjectTeam({ buttonCodes: objectContextStore.buttonCodes }));
+const canChangeProjectStatus = computed(() => objectContextStore.buttonCodes.includes('project:project:status'));
+const canDeleteProject = computed(() => objectContextStore.buttonCodes.includes('project:project:delete'));
+const visibleSectionKeys = computed(() =>
+  resolveVisibleProjectSettingSections(getProjectSettingSectionKeys(), objectContextStore.buttonCodes)
+);
+const anchorItems = computed(() =>
+  visibleSectionKeys.value.map(key => ({
+    key,
+    label: anchorLabelMap.get(key) || key
+  }))
+);
+const layoutScrollTarget = `#${LAYOUT_SCROLL_EL_ID}`;
+const anchorAffixOffset = computed(() => {
+  const fixedTopInset = themeStore.fixedHeaderAndTab
+    ? themeStore.header.height + (themeStore.tabVisible ? themeStore.tab.height : 0)
+    : 0;
+
+  return fixedTopInset + 16;
+});
+const anchorShellInlineStyle = computed(() => ({
+  maxHeight: isCompactLayout.value ? '' : `calc(100vh - ${anchorAffixOffset.value + 16}px)`
+}));
+const showLifecycleSection = computed(() => visibleSectionKeys.value.includes('lifecycle'));
+const showDangerSection = computed(() => visibleSectionKeys.value.includes('danger'));
+
+async function refreshContextSummary() {
+  if (!projectDomainConfig || !currentObjectId.value) {
+    return;
+  }
+
+  await objectContextStore.enterContext(projectDomainConfig, currentObjectId.value);
+}
+
+async function loadSettings() {
+  if (!currentObjectId.value) {
+    settings.value = null;
+    return;
+  }
+
+  const { error, data } = await fetchGetProjectSettings(currentObjectId.value);
+
+  if (error || !data) {
+    settings.value = null;
+    return;
+  }
+
+  settings.value = data;
+}
+
+async function loadMembers() {
+  if (!currentObjectId.value) {
+    members.value = [];
+    return;
+  }
+
+  memberLoading.value = true;
+
+  const { error, data } = await fetchGetProjectMembers(currentObjectId.value);
+
+  memberLoading.value = false;
+
+  if (error || !data) {
+    members.value = [];
+    return;
+  }
+
+  members.value = data;
+}
+
+async function loadRoleOptions() {
+  const { error, data } = await fetchGetRoleSimpleList({
+    scopeType: 'object',
+    objectType: 'project'
+  });
+
+  if (error || !data) {
+    roleOptions.value = [];
+    return;
+  }
+
+  roleOptions.value = data;
+}
+
+async function loadUserOptions() {
+  const { error, data } = await fetchGetUserSimpleList();
+
+  if (error || !data) {
+    userOptions.value = [];
+    return;
+  }
+
+  userOptions.value = data;
+}
+
+async function loadPageData() {
+  if (!currentObjectId.value) {
+    return;
+  }
+
+  pageLoading.value = true;
+
+  await Promise.all([refreshContextSummary(), loadSettings(), loadMembers(), loadRoleOptions(), loadUserOptions()]);
+
+  pageLoading.value = false;
+}
+
+function scrollToSection(key: string) {
+  if (!(key in sectionIdMap)) {
+    return;
+  }
+
+  const resolvedKey = key as ProjectSettingSectionKey;
+
+  if (!visibleSectionKeys.value.includes(resolvedKey)) {
+    return;
+  }
+
+  activeAnchorKey.value = resolvedKey;
+  const target = document.getElementById(sectionIdMap[resolvedKey]);
+
+  target?.scrollIntoView({
+    behavior: 'smooth',
+    block: 'start'
+  });
+}
+
+function openCreateMember() {
+  memberOperateMode.value = 'create';
+  selectedMember.value = null;
+  memberOperateVisible.value = true;
+}
+
+function openEditMember(member: Api.Project.ProjectMember) {
+  memberOperateMode.value = 'edit';
+  selectedMember.value = member;
+  memberOperateVisible.value = true;
+}
+
+function openRemoveMember(member: Api.Project.ProjectMember) {
+  selectedMember.value = member;
+  memberRemoveVisible.value = true;
+}
+
+function openLifecycleAction(action: Api.Project.ProjectLifecycleAction) {
+  selectedAction.value = action;
+  statusActionVisible.value = true;
+}
+
+async function handleSubmitBaseInfo(payload: Api.Project.UpdateProjectSettingBaseInfoParams) {
+  if (!currentObjectId.value) {
+    return;
+  }
+
+  const result = await fetchUpdateProjectSettingBaseInfo(currentObjectId.value, payload);
+
+  if (result.error) {
+    return;
+  }
+
+  window.$message?.success('基础信息更新成功');
+  baseInfoVisible.value = false;
+
+  await Promise.all([loadSettings(), refreshContextSummary()]);
+}
+
+async function handleSubmitMemberOperate(event: {
+  mode: 'create' | 'edit';
+  memberId?: string;
+  managerChanged: boolean;
+  payload: Api.Project.CreateProjectMemberParams | Api.Project.UpdateProjectMemberParams;
+}) {
+  if (!currentObjectId.value) {
+    return;
+  }
+
+  const result =
+    event.mode === 'create'
+      ? await fetchCreateProjectMember(currentObjectId.value, event.payload as Api.Project.CreateProjectMemberParams)
+      : await fetchUpdateProjectMember(
+          currentObjectId.value,
+          event.memberId || '',
+          event.payload as Api.Project.UpdateProjectMemberParams
+        );
+
+  if (result.error) {
+    return;
+  }
+
+  window.$message?.success(event.mode === 'create' ? '成员新增成功' : '成员角色调整成功');
+  memberOperateVisible.value = false;
+
+  await Promise.all([loadMembers(), loadSettings()]);
+
+  if (event.managerChanged) {
+    await refreshContextSummary();
+  }
+}
+
+async function handleSubmitRemoveMember(payload: Api.Project.InactiveProjectMemberParams) {
+  if (!currentObjectId.value || !selectedMember.value?.id) {
+    return;
+  }
+
+  const result = await fetchInactiveProjectMember(currentObjectId.value, selectedMember.value.id, payload);
+
+  if (result.error) {
+    return;
+  }
+
+  window.$message?.success('成员移出成功');
+  memberRemoveVisible.value = false;
+
+  await Promise.all([loadMembers(), loadSettings()]);
+}
+
+async function handleSubmitLifecycleAction(payload: Api.Project.ChangeProjectStatusParams) {
+  if (!currentObjectId.value || !selectedAction.value) {
+    return;
+  }
+
+  const result = await fetchChangeProjectStatus({
+    ...payload,
+    id: currentObjectId.value
+  });
+
+  if (result.error) {
+    return;
+  }
+
+  window.$message?.success(`${selectedAction.value.actionName}成功`);
+  statusActionVisible.value = false;
+
+  await Promise.all([loadSettings(), refreshContextSummary()]);
+}
+
+async function handleSubmitDelete(payload: Api.Project.DeleteProjectParams) {
+  const result = await fetchDeleteProject(payload);
+
+  if (result.error) {
+    return;
+  }
+
+  window.$message?.success('项目删除成功');
+  deleteVisible.value = false;
+  objectContextStore.clearContext();
+
+  await routerPush({
+    path: '/project/list'
+  });
+}
+
+watch(
+  visibleSectionKeys,
+  sectionKeys => {
+    activeAnchorKey.value = resolveVisibleProjectSettingSectionKey(activeAnchorKey.value, sectionKeys);
+  },
+  {
+    immediate: true
+  }
+);
+
+watch(
+  () => currentObjectId.value,
+  async objectId => {
+    if (!objectId) {
+      settings.value = null;
+      members.value = [];
+      return;
+    }
+
+    await loadPageData();
+  },
+  { immediate: true }
+);
+</script>
+
+<template>
+  <div v-loading="pageLoading" class="project-setting-page">
+    <div class="project-setting-page__body">
+      <div class="project-setting-page__aside">
+        <div v-if="isCompactLayout" class="project-setting-page__aside-shell" :style="anchorShellInlineStyle">
+          <SettingAnchorNav :items="anchorItems" :active-key="activeAnchorKey" @select="scrollToSection" />
+        </div>
+        <ElAffix
+          v-else
+          class="project-setting-page__aside-affix"
+          :offset="anchorAffixOffset"
+          :target="layoutScrollTarget"
+          teleported
+        >
+          <div class="project-setting-page__aside-shell" :style="anchorShellInlineStyle">
+            <SettingAnchorNav :items="anchorItems" :active-key="activeAnchorKey" @select="scrollToSection" />
+          </div>
+        </ElAffix>
+      </div>
+
+      <div class="project-setting-page__content">
+        <section :id="sectionIdMap['base-info']" class="project-setting-page__section">
+          <SettingBaseInfoCard :base-info="baseInfo" :readonly="!canUpdateProject" @edit="baseInfoVisible = true" />
+        </section>
+
+        <section :id="sectionIdMap.team" class="project-setting-page__section">
+          <SettingTeamPanel
+            :members="members"
+            :role-options="roleOptions"
+            :loading="memberLoading"
+            :readonly="!canManageTeam"
+            @create="openCreateMember"
+            @edit="openEditMember"
+            @remove="openRemoveMember"
+          />
+        </section>
+
+        <section v-if="showLifecycleSection" :id="sectionIdMap.lifecycle" class="project-setting-page__section">
+          <SettingLifecyclePanel
+            :lifecycle="lifecycle"
+            :readonly="!canChangeProjectStatus"
+            @action="openLifecycleAction"
+          />
+        </section>
+
+        <section v-if="showDangerSection" :id="sectionIdMap.danger" class="project-setting-page__section">
+          <SettingDangerZone
+            :project-name="baseInfo?.projectName || currentProject?.projectName || ''"
+            :disabled="!canDeleteProject"
+            @delete="deleteVisible = true"
+          />
+        </section>
+      </div>
+    </div>
+
+    <BaseInfoDialog v-model:visible="baseInfoVisible" :base-info="baseInfo" @submit="handleSubmitBaseInfo" />
+    <MemberOperateDialog
+      v-model:visible="memberOperateVisible"
+      :mode="memberOperateMode"
+      :member="selectedMember"
+      :current-manager="currentManager"
+      :role-options="roleOptions"
+      :user-options="
+        userOptions.filter(user => !members.some(member => member.status === 0 && member.userId === user.id))
+      "
+      @submit="handleSubmitMemberOperate"
+    />
+    <MemberRemoveDialog
+      v-model:visible="memberRemoveVisible"
+      :member="selectedMember"
+      @submit="handleSubmitRemoveMember"
+    />
+    <StatusActionDialog
+      v-model:visible="statusActionVisible"
+      :action="selectedAction"
+      @submit="handleSubmitLifecycleAction"
+    />
+    <ProjectDeleteDialog
+      v-model:visible="deleteVisible"
+      :project-id="currentObjectId"
+      :project-name="baseInfo?.projectName || currentProject?.projectName || ''"
+      @submit="handleSubmitDelete"
+    />
+  </div>
+</template>
+
+<style scoped>
+.project-setting-page {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.project-setting-page__body {
+  display: grid;
+  grid-template-columns: 220px minmax(0, 1fr);
+  gap: 16px;
+  align-items: stretch;
+}
+
+.project-setting-page__aside {
+  min-width: 0;
+  align-self: stretch;
+}
+
+.project-setting-page__aside-affix {
+  display: block;
+  width: 100%;
+}
+
+.project-setting-page__aside-shell {
+  min-height: 100%;
+  padding: 18px 16px;
+  border: 1px solid rgb(226 232 240 / 92%);
+  border-radius: 20px;
+  background:
+    radial-gradient(circle at top left, rgb(15 118 110 / 7%), transparent 34%),
+    linear-gradient(180deg, rgb(255 255 255 / 99%), rgb(248 250 252 / 97%));
+  box-sizing: border-box;
+  overflow-y: auto;
+  scrollbar-gutter: stable;
+}
+
+.project-setting-page__content {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.project-setting-page__section {
+  scroll-margin-top: 16px;
+}
+
+@media (width <= 1280px) {
+  .project-setting-page__body {
+    grid-template-columns: 1fr;
+  }
+
+  .project-setting-page__aside-shell {
+    min-height: auto;
+    overflow: visible;
+  }
+}
+</style>

src/views/project/project/setting/modules/base-info-dialog.vue

@@ -0,0 +1,313 @@
+<script setup lang="ts">
+import { computed, nextTick, reactive, watch } from 'vue';
+import { RDMS_OBJECT_DIRECTION_DICT_CODE, RDMS_PROJECT_TYPE_DICT_CODE } from '@/constants/dict';
+import { useDict } from '@/hooks/business/dict';
+import { useForm, useFormRules } from '@/hooks/common/form';
+import BusinessFormDialog from '@/components/custom/business-form-dialog.vue';
+import BusinessFormSection from '@/components/custom/business-form-section.vue';
+import DictSelect from '@/components/custom/dict-select.vue';
+import { getProjectBaseInfoReadonlyMessage, isProjectBaseInfoEditable } from '../shared';
+
+defineOptions({ name: 'ProjectBaseInfoDialog' });
+
+interface Props {
+  baseInfo: Api.Project.ProjectSettingBaseInfo | null;
+}
+
+interface Emits {
+  (e: 'submit', payload: Api.Project.UpdateProjectSettingBaseInfoParams): void;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits<Emits>();
+
+const visible = defineModel<boolean>('visible', {
+  default: false
+});
+
+const { getLabel: getDirectionLabel } = useDict(RDMS_OBJECT_DIRECTION_DICT_CODE);
+const { getLabel: getProjectTypeLabel } = useDict(RDMS_PROJECT_TYPE_DICT_CODE);
+const { formRef, validate } = useForm();
+const { createRequiredRule } = useFormRules();
+
+const model = reactive<Api.Project.UpdateProjectSettingBaseInfoParams>({
+  projectName: '',
+  directionCode: '',
+  projectType: '',
+  plannedStartDate: null,
+  plannedEndDate: null,
+  projectDesc: null
+});
+
+const baseInfoEditable = computed(() => isProjectBaseInfoEditable(props.baseInfo?.statusCode));
+const hasAssociatedProduct = computed(() => Boolean(props.baseInfo?.productId));
+const directionReadonly = computed(() => baseInfoEditable.value && hasAssociatedProduct.value);
+const readonlyMessage = computed(() => getProjectBaseInfoReadonlyMessage(props.baseInfo?.statusCode));
+const confirmDisabled = computed(() => !props.baseInfo || !baseInfoEditable.value);
+
+const directionDisplayName = computed(() => {
+  const directionCode = props.baseInfo?.directionCode;
+
+  if (!directionCode) {
+    return '';
+  }
+
+  return getDirectionLabel(directionCode, directionCode);
+});
+
+const projectTypeDisplayName = computed(() => {
+  const projectType = props.baseInfo?.projectType;
+
+  if (!projectType) {
+    return '';
+  }
+
+  return getProjectTypeLabel(projectType, projectType);
+});
+
+const rules = {
+  projectName: [createRequiredRule('请输入项目名称')],
+  directionCode: [createRequiredRule('请选择项目方向')],
+  projectType: [createRequiredRule('请选择项目类型')]
+} satisfies Record<string, App.Global.FormRule[]>;
+
+async function handleConfirm() {
+  if (confirmDisabled.value) {
+    return;
+  }
+
+  await validate();
+
+  emit('submit', {
+    projectName: model.projectName.trim(),
+    directionCode: directionReadonly.value ? props.baseInfo?.directionCode || model.directionCode : model.directionCode,
+    projectType: model.projectType,
+    plannedStartDate: model.plannedStartDate,
+    plannedEndDate: model.plannedEndDate,
+    projectDesc: model.projectDesc?.trim() || null
+  });
+}
+
+watch(
+  () => visible.value,
+  async value => {
+    if (!value || !props.baseInfo) {
+      return;
+    }
+
+    model.projectName = props.baseInfo.projectName || '';
+    model.directionCode = props.baseInfo.directionCode || '';
+    model.projectType = props.baseInfo.projectType || '';
+    model.plannedStartDate = props.baseInfo.plannedStartDate;
+    model.plannedEndDate = props.baseInfo.plannedEndDate;
+    model.projectDesc = props.baseInfo.projectDesc || '';
+
+    await nextTick();
+    formRef.value?.clearValidate();
+  }
+);
+</script>
+
+<template>
+  <BusinessFormDialog
+    v-model="visible"
+    title="编辑基础信息"
+    preset="md"
+    :confirm-disabled="confirmDisabled"
+    @confirm="handleConfirm"
+  >
+    <ElAlert v-if="readonlyMessage" :title="readonlyMessage" type="warning" :closable="false" class="mb-16px" />
+
+    <ElForm ref="formRef" :model="model" :rules="rules" label-position="top">
+      <BusinessFormSection title="项目信息">
+        <ElRow :gutter="16">
+          <ElCol :span="12">
+            <ElFormItem label="项目编码">
+              <ElInput :model-value="baseInfo?.projectCode || ''" readonly class="base-info-dialog__readonly-input" />
+            </ElFormItem>
+          </ElCol>
+          <ElCol :span="12">
+            <ElFormItem label="项目名称" prop="projectName">
+              <ElInput
+                v-if="baseInfoEditable"
+                v-model="model.projectName"
+                maxlength="200"
+                placeholder="请输入项目名称"
+              />
+              <ElInput
+                v-else
+                :model-value="model.projectName"
+                readonly
+                class="base-info-dialog__readonly-input"
+                placeholder="未获取到项目名称"
+              />
+            </ElFormItem>
+          </ElCol>
+          <ElCol :span="12">
+            <ElFormItem label="项目方向" prop="directionCode">
+              <DictSelect
+                v-if="baseInfoEditable && !directionReadonly"
+                v-model="model.directionCode"
+                :dict-code="RDMS_OBJECT_DIRECTION_DICT_CODE"
+                filterable
+                placeholder="请选择项目方向"
+              />
+              <ElInput
+                v-else
+                :model-value="directionDisplayName"
+                readonly
+                class="base-info-dialog__readonly-input"
+                placeholder="未获取到项目方向"
+              />
+            </ElFormItem>
+          </ElCol>
+          <ElCol :span="12">
+            <ElFormItem label="项目类型" prop="projectType">
+              <DictSelect
+                v-if="baseInfoEditable"
+                v-model="model.projectType"
+                :dict-code="RDMS_PROJECT_TYPE_DICT_CODE"
+                filterable
+                placeholder="请选择项目类型"
+              />
+              <ElInput
+                v-else
+                :model-value="projectTypeDisplayName"
+                readonly
+                class="base-info-dialog__readonly-input"
+                placeholder="未获取到项目类型"
+              />
+            </ElFormItem>
+          </ElCol>
+          <ElCol :span="12">
+            <ElFormItem label="所属产品">
+              <ElInput
+                :model-value="baseInfo?.productName || baseInfo?.productId || '未关联产品'"
+                readonly
+                class="base-info-dialog__readonly-input"
+                placeholder="未关联产品"
+              />
+            </ElFormItem>
+          </ElCol>
+          <ElCol :span="12">
+            <ElFormItem>
+              <template #label>
+                <span class="business-form-label-with-tip">
+                  <ElTooltip
+                    content="如需调整项目经理，请到项目内的团队管理处处理。"
+                    popper-class="business-form-label-tooltip"
+                    placement="top-start"
+                  >
+                    <span class="business-form-label-tip">
+                      <icon-fe:question />
+                    </span>
+                  </ElTooltip>
+                  <span>项目经理</span>
+                </span>
+              </template>
+              <ElInput
+                :model-value="baseInfo?.managerUserNickname || baseInfo?.managerUserId || ''"
+                readonly
+                class="base-info-dialog__readonly-input"
+                placeholder="未获取到项目经理"
+              />
+            </ElFormItem>
+          </ElCol>
+          <ElCol :span="12">
+            <ElFormItem label="计划开始日期">
+              <ElDatePicker
+                v-if="baseInfoEditable"
+                v-model="model.plannedStartDate"
+                type="date"
+                value-format="YYYY-MM-DD"
+                placeholder="选择计划开始日期"
+                class="base-info-dialog__date-picker"
+              />
+              <ElInput
+                v-else
+                :model-value="model.plannedStartDate || ''"
+                readonly
+                class="base-info-dialog__readonly-input"
+                placeholder="未填写计划开始日期"
+              />
+            </ElFormItem>
+          </ElCol>
+          <ElCol :span="12">
+            <ElFormItem label="计划结束日期">
+              <ElDatePicker
+                v-if="baseInfoEditable"
+                v-model="model.plannedEndDate"
+                type="date"
+                value-format="YYYY-MM-DD"
+                placeholder="选择计划结束日期"
+                class="base-info-dialog__date-picker"
+              />
+              <ElInput
+                v-else
+                :model-value="model.plannedEndDate || ''"
+                readonly
+                class="base-info-dialog__readonly-input"
+                placeholder="未填写计划结束日期"
+              />
+            </ElFormItem>
+          </ElCol>
+          <ElCol :span="24">
+            <ElFormItem label="项目说明">
+              <ElInput
+                v-if="baseInfoEditable"
+                v-model="model.projectDesc"
+                type="textarea"
+                :rows="4"
+                maxlength="4000"
+                show-word-limit
+                placeholder="请输入项目说明"
+              />
+              <ElInput
+                v-else
+                :model-value="model.projectDesc || ''"
+                type="textarea"
+                :rows="4"
+                readonly
+                class="base-info-dialog__readonly-input"
+                placeholder="未填写项目说明"
+              />
+            </ElFormItem>
+          </ElCol>
+        </ElRow>
+      </BusinessFormSection>
+    </ElForm>
+  </BusinessFormDialog>
+</template>
+
+<style scoped>
+:deep(.base-info-dialog__readonly-input .el-input__wrapper) {
+  background: linear-gradient(180deg, rgb(241 245 249 / 98%), rgb(226 232 240 / 94%)), rgb(241 245 249);
+  box-shadow: 0 0 0 1px rgb(203 213 225 / 96%) inset;
+  cursor: default;
+}
+
+:deep(.base-info-dialog__readonly-input .el-textarea__inner) {
+  background: linear-gradient(180deg, rgb(241 245 249 / 98%), rgb(226 232 240 / 94%)), rgb(241 245 249);
+  box-shadow: 0 0 0 1px rgb(203 213 225 / 96%) inset;
+  cursor: default;
+  resize: none;
+}
+
+:deep(.base-info-dialog__readonly-input .el-input__wrapper:hover),
+:deep(.base-info-dialog__readonly-input.is-focus .el-input__wrapper),
+:deep(.base-info-dialog__readonly-input .el-textarea__inner:hover),
+:deep(.base-info-dialog__readonly-input .el-textarea__inner:focus) {
+  box-shadow: 0 0 0 1px rgb(203 213 225 / 96%) inset;
+}
+
+:deep(.base-info-dialog__readonly-input .el-input__inner),
+:deep(.base-info-dialog__readonly-input .el-textarea__inner) {
+  color: rgb(51 65 85 / 96%);
+  cursor: default;
+  -webkit-text-fill-color: rgb(51 65 85 / 96%);
+}
+
+:deep(.base-info-dialog__date-picker.el-date-editor.el-input) {
+  width: 100%;
+}
+</style>

src/views/project/project/setting/modules/member-operate-dialog.vue

@@ -0,0 +1,226 @@
+<script setup lang="ts">
+import { computed, nextTick, reactive, watch } from 'vue';
+import { useForm, useFormRules } from '@/hooks/common/form';
+import BusinessFormDialog from '@/components/custom/business-form-dialog.vue';
+import BusinessFormSection from '@/components/custom/business-form-section.vue';
+import BusinessUserSelect from '@/components/custom/business-user-select.vue';
+import { getPreviousProjectManagerRoleOptions, shouldRequireProjectManagerHandover } from '../shared';
+
+defineOptions({ name: 'ProjectMemberOperateDialog' });
+
+type OperateMode = 'create' | 'edit';
+
+interface Props {
+  mode: OperateMode;
+  member: Api.Project.ProjectMember | null;
+  currentManager: Api.Project.ProjectMember | null;
+  roleOptions: Api.SystemManage.RoleSimple[];
+  userOptions: Api.SystemManage.UserSimple[];
+}
+
+interface SubmitPayload {
+  mode: OperateMode;
+  memberId?: string;
+  managerChanged: boolean;
+  payload: Api.Project.CreateProjectMemberParams | Api.Project.UpdateProjectMemberParams;
+}
+
+interface Emits {
+  (e: 'submit', payload: SubmitPayload): void;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits<Emits>();
+
+const visible = defineModel<boolean>('visible', {
+  default: false
+});
+
+const { formRef, validate } = useForm();
+const { createRequiredRule } = useFormRules();
+
+interface Model {
+  userId: string;
+  roleId: string;
+  remark: string;
+  reason: string;
+  previousManagerRoleId: string;
+}
+
+const model = reactive<Model>({
+  userId: '',
+  roleId: '',
+  remark: '',
+  reason: '',
+  previousManagerRoleId: ''
+});
+
+const dialogTitle = computed(() => (props.mode === 'create' ? '新增团队成员' : '调整成员角色'));
+const userLabelMap = computed(() => new Map(props.userOptions.map(item => [item.id, item.nickname])));
+const selectedUserId = computed(() => (props.mode === 'create' ? model.userId : props.member?.userId || ''));
+const showManagerHandover = computed(() => {
+  return (
+    shouldRequireProjectManagerHandover(model.roleId, props.currentManager) &&
+    Boolean(selectedUserId.value) &&
+    selectedUserId.value !== props.currentManager?.userId
+  );
+});
+const previousManagerRoleOptions = computed(() =>
+  getPreviousProjectManagerRoleOptions(props.roleOptions, props.currentManager?.roleId || '')
+);
+
+const rules = computed(
+  () =>
+    ({
+      userId: props.mode === 'create' ? [createRequiredRule('请选择成员用户')] : [],
+      roleId: [createRequiredRule('请选择角色')],
+      previousManagerRoleId: showManagerHandover.value ? [createRequiredRule('请选择原项目经理交接后角色')] : []
+    }) satisfies Record<string, App.Global.FormRule[]>
+);
+
+async function handleConfirm() {
+  await validate();
+
+  const sharedPayload = {
+    roleId: model.roleId,
+    remark: model.remark.trim() || null,
+    previousManagerUserId: showManagerHandover.value ? props.currentManager?.userId || null : null,
+    previousManagerRoleId: showManagerHandover.value ? model.previousManagerRoleId : null
+  };
+
+  if (props.mode === 'create') {
+    emit('submit', {
+      mode: 'create',
+      managerChanged: showManagerHandover.value,
+      payload: {
+        userId: model.userId,
+        roleId: sharedPayload.roleId,
+        remark: sharedPayload.remark,
+        previousManagerUserId: sharedPayload.previousManagerUserId,
+        previousManagerRoleId: sharedPayload.previousManagerRoleId
+      }
+    });
+    return;
+  }
+
+  emit('submit', {
+    mode: 'edit',
+    memberId: props.member?.id,
+    managerChanged: showManagerHandover.value,
+    payload: {
+      roleId: sharedPayload.roleId,
+      reason: model.reason.trim() || null,
+      remark: sharedPayload.remark,
+      previousManagerUserId: sharedPayload.previousManagerUserId,
+      previousManagerRoleId: sharedPayload.previousManagerRoleId
+    }
+  });
+}
+
+watch(
+  () => visible.value,
+  async value => {
+    if (!value) {
+      return;
+    }
+
+    model.userId = props.mode === 'create' ? '' : props.member?.userId || '';
+    model.roleId = props.mode === 'create' ? '' : props.member?.roleId || '';
+    model.remark = props.mode === 'create' ? '' : props.member?.remark || '';
+    model.reason = '';
+    model.previousManagerRoleId = '';
+
+    await nextTick();
+    formRef.value?.clearValidate();
+  }
+);
+</script>
+
+<template>
+  <BusinessFormDialog v-model="visible" :title="dialogTitle" preset="sm" @confirm="handleConfirm">
+    <ElForm ref="formRef" :model="model" :rules="rules" label-position="top" :validate-on-rule-change="false">
+      <BusinessFormSection title="成员信息">
+        <ElRow :gutter="16">
+          <ElCol :span="24">
+            <ElFormItem v-if="mode === 'create'" label="成员用户" prop="userId">
+              <BusinessUserSelect v-model="model.userId" :options="userOptions" placeholder="请选择成员用户" />
+            </ElFormItem>
+            <ElFormItem v-else label="成员用户">
+              <ElInput
+                :model-value="member?.userNickname || userLabelMap.get(member?.userId || '') || ''"
+                readonly
+                class="member-operate-dialog__readonly-input"
+                placeholder="未获取到成员用户"
+              />
+            </ElFormItem>
+          </ElCol>
+          <ElCol :span="24">
+            <ElFormItem label="目标角色" prop="roleId">
+              <ElSelect v-model="model.roleId" class="w-full" filterable placeholder="请选择角色">
+                <ElOption v-for="item in roleOptions" :key="item.id" :label="item.name" :value="item.id" />
+              </ElSelect>
+            </ElFormItem>
+          </ElCol>
+          <ElCol :span="24">
+            <ElFormItem label="备注">
+              <ElInput
+                v-model="model.remark"
+                type="textarea"
+                :rows="3"
+                maxlength="500"
+                show-word-limit
+                placeholder="请输入备注"
+              />
+            </ElFormItem>
+          </ElCol>
+        </ElRow>
+      </BusinessFormSection>
+
+      <BusinessFormSection v-if="mode === 'edit'" title="角色调整说明">
+        <ElFormItem label="变更原因">
+          <ElInput
+            v-model="model.reason"
+            type="textarea"
+            :rows="3"
+            maxlength="500"
+            show-word-limit
+            placeholder="请输入变更原因"
+          />
+        </ElFormItem>
+      </BusinessFormSection>
+
+      <BusinessFormSection v-if="showManagerHandover" title="项目经理交接">
+        <ElAlert
+          :title="`当前项目经理 ${currentManager?.userNickname || currentManager?.userId || ''} 将完成交接，请选择其交接后角色。`"
+          type="warning"
+          :closable="false"
+          class="mb-16px"
+        />
+        <ElFormItem label="原项目经理交接后角色" prop="previousManagerRoleId">
+          <ElSelect v-model="model.previousManagerRoleId" class="w-full" placeholder="请选择原项目经理交接后角色">
+            <ElOption v-for="item in previousManagerRoleOptions" :key="item.id" :label="item.name" :value="item.id" />
+          </ElSelect>
+        </ElFormItem>
+      </BusinessFormSection>
+    </ElForm>
+  </BusinessFormDialog>
+</template>
+
+<style scoped>
+:deep(.member-operate-dialog__readonly-input .el-input__wrapper) {
+  background: linear-gradient(180deg, rgb(241 245 249 / 98%), rgb(226 232 240 / 94%)), rgb(241 245 249);
+  box-shadow: 0 0 0 1px rgb(203 213 225 / 96%) inset;
+  cursor: default;
+}
+
+:deep(.member-operate-dialog__readonly-input .el-input__wrapper:hover),
+:deep(.member-operate-dialog__readonly-input.is-focus .el-input__wrapper) {
+  box-shadow: 0 0 0 1px rgb(203 213 225 / 96%) inset;
+}
+
+:deep(.member-operate-dialog__readonly-input .el-input__inner) {
+  color: rgb(51 65 85 / 96%);
+  cursor: default;
+  -webkit-text-fill-color: rgb(51 65 85 / 96%);
+}
+</style>

src/views/project/project/setting/modules/member-remove-dialog.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { reactive, watch } from 'vue';
+import BusinessFormDialog from '@/components/custom/business-form-dialog.vue';
+
+defineOptions({ name: 'ProjectMemberRemoveDialog' });
+
+interface Props {
+  member: Api.Project.ProjectMember | null;
+}
+
+interface Emits {
+  (e: 'submit', payload: Api.Project.InactiveProjectMemberParams): void;
+}
+
+defineProps<Props>();
+const emit = defineEmits<Emits>();
+
+const visible = defineModel<boolean>('visible', {
+  default: false
+});
+
+const model = reactive({
+  reason: ''
+});
+
+function handleConfirm() {
+  emit('submit', {
+    reason: model.reason.trim() || null
+  });
+}
+
+watch(
+  () => visible.value,
+  value => {
+    if (!value) {
+      return;
+    }
+
+    model.reason = '';
+  }
+);
+</script>
+
+<template>
+  <BusinessFormDialog v-model="visible" title="移出成员" preset="sm" @confirm="handleConfirm">
+    <ElAlert
+      :title="`确认将 ${member?.userNickname || member?.userId || '--'} 从当前项目团队中移出吗？`"
+      type="warning"
+      :closable="false"
+      class="mb-16px"
+    />
+    <ElForm label-position="top">
+      <ElFormItem label="移出原因">
+        <ElInput
+          v-model="model.reason"
+          type="textarea"
+          :rows="4"
+          maxlength="500"
+          show-word-limit
+          placeholder="请输入移出原因"
+        />
+      </ElFormItem>
+    </ElForm>
+  </BusinessFormDialog>
+</template>

src/views/project/project/setting/modules/project-delete-dialog.vue

@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import { computed, reactive, watch } from 'vue';
+import BusinessFormDialog from '@/components/custom/business-form-dialog.vue';
+
+defineOptions({ name: 'ProjectDeleteDialog' });
+
+interface Props {
+  projectId: string;
+  projectName: string;
+}
+
+interface Emits {
+  (e: 'submit', payload: Api.Project.DeleteProjectParams): void;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits<Emits>();
+
+const visible = defineModel<boolean>('visible', {
+  default: false
+});
+
+const model = reactive({
+  confirmName: '',
+  confirmText: '',
+  reason: ''
+});
+
+const confirmDisabled = computed(() => {
+  return (
+    !model.reason.trim() || model.confirmName.trim() !== props.projectName || model.confirmText.trim() !== 'DELETE'
+  );
+});
+
+function handleConfirm() {
+  emit('submit', {
+    id: props.projectId,
+    projectName: model.confirmName.trim(),
+    confirmText: model.confirmText.trim(),
+    reason: model.reason.trim()
+  });
+}
+
+watch(
+  () => visible.value,
+  value => {
+    if (!value) {
+      return;
+    }
+
+    model.confirmName = '';
+    model.confirmText = '';
+    model.reason = '';
+  }
+);
+</script>
+
+<template>
+  <BusinessFormDialog
+    v-model="visible"
+    title="删除项目"
+    preset="sm"
+    :confirm-disabled="confirmDisabled"
+    confirm-text="确认删除"
+    @confirm="handleConfirm"
+  >
+    <ElAlert
+      :title="`请输入当前项目名称 ${projectName || '--'} 和确认口令 DELETE，删除后将退出当前对象上下文。`"
+      type="error"
+      :closable="false"
+      class="mb-16px"
+    />
+    <ElForm label-position="top">
+      <ElFormItem label="删除确认名称">
+        <ElInput v-model="model.confirmName" placeholder="请输入当前项目名称" />
+      </ElFormItem>
+      <ElFormItem label="确认口令">
+        <ElInput v-model="model.confirmText" placeholder="请输入 DELETE" />
+      </ElFormItem>
+      <ElFormItem label="删除原因">
+        <ElInput
+          v-model="model.reason"
+          type="textarea"
+          :rows="4"
+          maxlength="500"
+          show-word-limit
+          placeholder="请输入删除原因"
+        />
+      </ElFormItem>
+    </ElForm>
+  </BusinessFormDialog>
+</template>

src/views/project/project/setting/modules/setting-anchor-nav.vue

@@ -0,0 +1,90 @@
+<script setup lang="ts">
+defineOptions({ name: 'ProjectSettingAnchorNav' });
+
+interface ProjectSettingAnchorItem {
+  key: string;
+  label: string;
+}
+
+interface Props {
+  items: readonly ProjectSettingAnchorItem[];
+  activeKey: string;
+}
+
+interface Emits {
+  (e: 'select', key: string): void;
+}
+
+defineProps<Props>();
+const emit = defineEmits<Emits>();
+</script>
+
+<template>
+  <div class="project-setting-anchor-nav">
+    <div class="project-setting-anchor-nav__title">设置目录</div>
+    <div class="project-setting-anchor-nav__list">
+      <button
+        v-for="item in items"
+        :key="item.key"
+        type="button"
+        class="project-setting-anchor-nav__item"
+        :class="{ 'is-active': item.key === activeKey }"
+        @click="emit('select', item.key)"
+      >
+        {{ item.label }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.project-setting-anchor-nav {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.project-setting-anchor-nav__title {
+  color: rgb(15 23 42 / 94%);
+  font-size: 15px;
+  font-weight: 700;
+}
+
+.project-setting-anchor-nav__list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  min-height: 0;
+}
+
+.project-setting-anchor-nav__item {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  min-height: 42px;
+  padding: 0 14px;
+  border: 1px solid rgb(226 232 240 / 92%);
+  border-radius: 14px;
+  background-color: rgb(248 250 252 / 96%);
+  color: rgb(71 85 105 / 94%);
+  font-size: 14px;
+  text-align: left;
+  transition:
+    border-color 0.2s ease,
+    background-color 0.2s ease,
+    color 0.2s ease,
+    transform 0.2s ease;
+}
+
+.project-setting-anchor-nav__item:hover {
+  transform: translateY(-1px);
+  border-color: rgb(148 163 184 / 56%);
+}
+
+.project-setting-anchor-nav__item.is-active {
+  border-color: rgb(13 148 136 / 42%);
+  background-color: rgb(240 253 250 / 98%);
+  color: rgb(15 118 110 / 96%);
+  font-weight: 600;
+}
+</style>

src/views/project/project/setting/modules/setting-base-info-card.vue

@@ -0,0 +1,103 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import dayjs from 'dayjs';
+import { RDMS_OBJECT_DIRECTION_DICT_CODE, RDMS_PROJECT_TYPE_DICT_CODE } from '@/constants/dict';
+import { useDict } from '@/hooks/business/dict';
+import { getProjectStatusLabel, getProjectStatusTagType } from '../../../shared/project-master-data';
+import { isProjectBaseInfoEditable } from '../shared';
+
+defineOptions({ name: 'ProjectSettingBaseInfoCard' });
+
+interface Props {
+  baseInfo: Api.Project.ProjectSettingBaseInfo | null;
+  readonly?: boolean;
+}
+
+interface Emits {
+  (e: 'edit'): void;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  readonly: false
+});
+const emit = defineEmits<Emits>();
+
+const editDisabled = computed(() => {
+  if (!props.baseInfo) {
+    return true;
+  }
+
+  return props.readonly || !isProjectBaseInfoEditable(props.baseInfo.statusCode);
+});
+
+const { getLabel: getDirectionLabel } = useDict(RDMS_OBJECT_DIRECTION_DICT_CODE);
+const { getLabel: getProjectTypeLabel } = useDict(RDMS_PROJECT_TYPE_DICT_CODE);
+
+function formatDate(date: string | null | undefined) {
+  if (!date) {
+    return '--';
+  }
+  return dayjs(date).format('YYYY-MM-DD');
+}
+
+function formatActualStartDate(date: string | null | undefined) {
+  return date ? dayjs(date).format('YYYY-MM-DD') : '未开始';
+}
+
+function formatActualEndDate(date: string | null | undefined) {
+  return date ? dayjs(date).format('YYYY-MM-DD') : '未结束';
+}
+</script>
+
+<template>
+  <ElCard class="card-wrapper">
+    <template #header>
+      <div class="flex items-center justify-between gap-12px">
+        <div>
+          <h3 class="text-16px text-[#0f172a] font-700">基础信息</h3>
+        </div>
+        <ElButton type="primary" plain :disabled="editDisabled" @click="emit('edit')">编辑基础信息</ElButton>
+      </div>
+    </template>
+
+    <ElDescriptions v-if="baseInfo" :column="2" border>
+      <ElDescriptionsItem label="项目编码">{{ baseInfo.projectCode || '--' }}</ElDescriptionsItem>
+      <ElDescriptionsItem label="项目名称">{{ baseInfo.projectName || '--' }}</ElDescriptionsItem>
+      <ElDescriptionsItem label="项目方向">
+        {{ getDirectionLabel(baseInfo.directionCode, '--') }}
+      </ElDescriptionsItem>
+      <ElDescriptionsItem label="项目类型">
+        {{ getProjectTypeLabel(baseInfo.projectType, '--') }}
+      </ElDescriptionsItem>
+      <ElDescriptionsItem label="所属产品">{{ baseInfo.productName || baseInfo.productId || '--' }}</ElDescriptionsItem>
+      <ElDescriptionsItem label="项目经理">
+        {{ baseInfo.managerUserNickname || baseInfo.managerUserId || '--' }}
+      </ElDescriptionsItem>
+      <ElDescriptionsItem label="计划开始日期">{{ formatDate(baseInfo.plannedStartDate) }}</ElDescriptionsItem>
+      <ElDescriptionsItem label="计划结束日期">{{ formatDate(baseInfo.plannedEndDate) }}</ElDescriptionsItem>
+      <ElDescriptionsItem label="实际开始日期">
+        {{ formatActualStartDate(baseInfo.actualStartDate) }}
+      </ElDescriptionsItem>
+      <ElDescriptionsItem label="实际结束日期">{{ formatActualEndDate(baseInfo.actualEndDate) }}</ElDescriptionsItem>
+      <ElDescriptionsItem label="当前状态">
+        <ElTag :type="getProjectStatusTagType(baseInfo.statusCode)">
+          {{ getProjectStatusLabel(baseInfo.statusCode) }}
+        </ElTag>
+      </ElDescriptionsItem>
+      <ElDescriptionsItem label="项目说明" :span="2">
+        <div class="project-setting-base-info-card__description">{{ baseInfo.projectDesc || '--' }}</div>
+      </ElDescriptionsItem>
+    </ElDescriptions>
+
+    <ElEmpty v-else description="未获取到基础信息" />
+  </ElCard>
+</template>
+
+<style scoped>
+.project-setting-base-info-card__description {
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+  line-height: 1.7;
+}
+</style>

src/views/project/project/setting/modules/setting-danger-zone.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+defineOptions({ name: 'ProjectSettingDangerZone' });
+
+interface Props {
+  projectName: string;
+  disabled?: boolean;
+}
+
+interface Emits {
+  (e: 'delete'): void;
+}
+
+withDefaults(defineProps<Props>(), {
+  disabled: false
+});
+const emit = defineEmits<Emits>();
+</script>
+
+<template>
+  <ElCard class="project-setting-danger-zone card-wrapper">
+    <div class="project-setting-danger-zone__content">
+      <div class="min-w-0 flex-1">
+        <h3 class="text-16px text-[#7f1d1d] font-700">危险操作</h3>
+        <p class="mt-8px text-14px text-[#991b1b] leading-24px">
+          删除后将退出当前项目对象上下文，并返回项目入口页。删除时必须输入当前项目名称
+          <strong>{{ projectName || '--' }}</strong>
+          进行二次确认。
+        </p>
+      </div>
+      <ElButton type="danger" plain :disabled="disabled" @click="emit('delete')">删除项目</ElButton>
+    </div>
+  </ElCard>
+</template>
+
+<style scoped>
+.project-setting-danger-zone {
+  border: 1px solid rgb(254 202 202 / 96%);
+  background:
+    radial-gradient(circle at top right, rgb(254 226 226 / 96%), transparent 35%),
+    linear-gradient(180deg, rgb(255 255 255 / 98%), rgb(254 242 242 / 96%));
+}
+
+.project-setting-danger-zone__content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+}
+</style>

src/views/project/project/setting/modules/setting-lifecycle-panel.vue

@@ -0,0 +1,407 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { getProjectStatusLabel } from '../../../shared/project-master-data';
+import { getProjectLifecycleActionCardMeta, getProjectLifecycleStatusSummary } from '../shared';
+
+defineOptions({ name: 'ProjectSettingLifecyclePanel' });
+
+interface Props {
+  lifecycle: Api.Project.ProjectLifecycleInfo | null;
+  readonly?: boolean;
+}
+
+interface Emits {
+  (e: 'action', action: Api.Project.ProjectLifecycleAction): void;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  readonly: false
+});
+const emit = defineEmits<Emits>();
+
+const statusSummary = computed(() => {
+  if (!props.lifecycle) {
+    return null;
+  }
+
+  return getProjectLifecycleStatusSummary(props.lifecycle.statusCode);
+});
+
+const actionCards = computed(() =>
+  (props.lifecycle?.availableActions || []).map(action => ({
+    ...action,
+    ...getProjectLifecycleActionCardMeta(action.actionCode)
+  }))
+);
+</script>
+
+<template>
+  <ElCard class="card-wrapper">
+    <template #header>
+      <div>
+        <h3 class="text-16px text-[#0f172a] font-700">生命周期管理</h3>
+      </div>
+    </template>
+
+    <template v-if="lifecycle">
+      <div class="setting-lifecycle-panel__layout">
+        <section
+          class="setting-lifecycle-panel__hero"
+          :class="[`setting-lifecycle-panel__hero--${statusSummary?.tone || 'slate'}`]"
+        >
+          <div class="setting-lifecycle-panel__hero-top">
+            <div class="setting-lifecycle-panel__hero-main">
+              <div class="setting-lifecycle-panel__hero-status-row">
+                <span class="setting-lifecycle-panel__hero-status-label">当前状态</span>
+                <span class="setting-lifecycle-panel__hero-status-chip">
+                  {{ getProjectStatusLabel(lifecycle.statusCode) }}
+                </span>
+              </div>
+              <h4 class="setting-lifecycle-panel__hero-title">{{ statusSummary?.caption }}</h4>
+            </div>
+          </div>
+
+          <p class="setting-lifecycle-panel__hero-desc">
+            {{ statusSummary?.description }}
+          </p>
+
+          <div class="setting-lifecycle-panel__reason-card">
+            <span class="setting-lifecycle-panel__reason-label">最近状态原因</span>
+            <strong class="setting-lifecycle-panel__reason-value">
+              {{ lifecycle.lastStatusReason || '当前没有记录状态原因。' }}
+            </strong>
+          </div>
+        </section>
+
+        <section class="setting-lifecycle-panel__action-panel">
+          <div class="setting-lifecycle-panel__action-head">
+            <h4 class="setting-lifecycle-panel__action-title">可执行动作</h4>
+          </div>
+
+          <div v-if="actionCards.length > 0" class="setting-lifecycle-panel__action-grid">
+            <button
+              v-for="action in actionCards"
+              :key="action.actionCode"
+              type="button"
+              class="setting-lifecycle-panel__action-card"
+              :class="[`setting-lifecycle-panel__action-card--${action.tone}`]"
+              :disabled="props.readonly"
+              @click="emit('action', action)"
+            >
+              <div class="setting-lifecycle-panel__action-card-top">
+                <span class="setting-lifecycle-panel__action-dot" aria-hidden="true"></span>
+                <strong class="setting-lifecycle-panel__action-name">{{ action.actionName }}</strong>
+              </div>
+              <p class="setting-lifecycle-panel__action-desc">{{ action.description }}</p>
+            </button>
+          </div>
+          <div v-else class="setting-lifecycle-panel__empty-tip">当前状态下暂无可执行生命周期动作。</div>
+        </section>
+      </div>
+    </template>
+
+    <ElEmpty v-else description="未获取到生命周期信息" />
+  </ElCard>
+</template>
+
+<style scoped>
+.setting-lifecycle-panel__layout {
+  display: grid;
+  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
+  gap: 16px;
+  align-items: start;
+}
+
+.setting-lifecycle-panel__hero,
+.setting-lifecycle-panel__action-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  min-height: 100%;
+  padding: 18px;
+  border: 1px solid rgb(226 232 240 / 92%);
+  border-radius: 20px;
+  background-color: rgb(248 250 252 / 96%);
+}
+
+.setting-lifecycle-panel__hero {
+  overflow: hidden;
+  background:
+    radial-gradient(circle at top left, rgb(15 118 110 / 10%), transparent 34%),
+    linear-gradient(180deg, rgb(255 255 255 / 99%), rgb(248 250 252 / 97%));
+}
+
+.setting-lifecycle-panel__hero--emerald {
+  border-color: rgb(16 185 129 / 22%);
+}
+
+.setting-lifecycle-panel__hero--amber {
+  border-color: rgb(245 158 11 / 22%);
+  background:
+    radial-gradient(circle at top left, rgb(245 158 11 / 10%), transparent 34%),
+    linear-gradient(180deg, rgb(255 255 255 / 99%), rgb(255 251 235 / 97%));
+}
+
+.setting-lifecycle-panel__hero--slate {
+  border-color: rgb(100 116 139 / 22%);
+  background:
+    radial-gradient(circle at top left, rgb(100 116 139 / 10%), transparent 34%),
+    linear-gradient(180deg, rgb(255 255 255 / 99%), rgb(248 250 252 / 97%));
+}
+
+.setting-lifecycle-panel__hero--rose {
+  border-color: rgb(244 63 94 / 22%);
+  background:
+    radial-gradient(circle at top left, rgb(244 63 94 / 10%), transparent 34%),
+    linear-gradient(180deg, rgb(255 255 255 / 99%), rgb(255 241 242 / 97%));
+}
+
+.setting-lifecycle-panel__hero-top,
+.setting-lifecycle-panel__action-head {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.setting-lifecycle-panel__hero-main {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.setting-lifecycle-panel__hero-status-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.setting-lifecycle-panel__hero-status-label {
+  color: rgb(71 85 105 / 94%);
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.setting-lifecycle-panel__hero-status-chip {
+  display: inline-flex;
+  align-items: center;
+  padding: 4px 12px;
+  border: 1px solid transparent;
+  border-radius: 999px;
+  font-size: 13px;
+  font-weight: 700;
+  line-height: 1.2;
+}
+
+.setting-lifecycle-panel__hero-title {
+  color: rgb(15 23 42 / 96%);
+  font-size: 22px;
+  font-weight: 700;
+  line-height: 1.25;
+}
+
+.setting-lifecycle-panel__action-title {
+  color: rgb(15 23 42 / 96%);
+  font-size: 18px;
+  font-weight: 700;
+  line-height: 1.25;
+}
+
+.setting-lifecycle-panel__hero-desc {
+  max-width: 560px;
+  color: rgb(71 85 105 / 94%);
+  font-size: 14px;
+  line-height: 1.7;
+}
+
+.setting-lifecycle-panel__reason-card {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 14px 16px;
+  border: 1px solid rgb(226 232 240 / 88%);
+  border-radius: 16px;
+  background-color: rgb(255 255 255 / 82%);
+}
+
+.setting-lifecycle-panel__reason-label {
+  color: rgb(100 116 139 / 92%);
+  font-size: 12px;
+}
+
+.setting-lifecycle-panel__reason-value {
+  color: rgb(15 23 42 / 94%);
+  font-size: 15px;
+  line-height: 1.7;
+}
+
+.setting-lifecycle-panel__action-panel {
+  background:
+    radial-gradient(circle at top right, rgb(59 130 246 / 7%), transparent 32%),
+    linear-gradient(180deg, rgb(255 255 255 / 99%), rgb(248 250 252 / 97%));
+}
+
+.setting-lifecycle-panel__action-grid {
+  display: grid;
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+  gap: 10px;
+}
+
+.setting-lifecycle-panel__action-card {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: 100%;
+  padding: 14px 16px;
+  border: 1px solid rgb(226 232 240 / 92%);
+  border-radius: 18px;
+  background-color: rgb(255 255 255 / 96%);
+  text-align: left;
+  transition:
+    transform 0.2s ease,
+    border-color 0.2s ease,
+    box-shadow 0.2s ease;
+}
+
+.setting-lifecycle-panel__action-card:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 10px 22px rgb(15 23 42 / 6%);
+}
+
+.setting-lifecycle-panel__action-card:disabled {
+  opacity: 0.58;
+  cursor: not-allowed;
+}
+
+.setting-lifecycle-panel__action-card:disabled:hover {
+  transform: none;
+  box-shadow: none;
+}
+
+.setting-lifecycle-panel__action-card-top {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.setting-lifecycle-panel__action-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 999px;
+  background-color: currentcolor;
+  flex: 0 0 auto;
+}
+
+.setting-lifecycle-panel__action-name {
+  color: rgb(15 23 42 / 96%);
+  font-size: 16px;
+  font-weight: 700;
+}
+
+.setting-lifecycle-panel__action-desc {
+  color: rgb(71 85 105 / 94%);
+  font-size: 13px;
+  line-height: 1.6;
+}
+
+.setting-lifecycle-panel__empty-tip {
+  padding: 18px 16px;
+  border: 1px dashed rgb(203 213 225 / 92%);
+  border-radius: 16px;
+  color: rgb(100 116 139 / 92%);
+  font-size: 13px;
+  line-height: 1.7;
+}
+
+.setting-lifecycle-panel__hero--emerald .setting-lifecycle-panel__hero-status-chip {
+  border-color: rgb(16 185 129 / 24%);
+  background-color: rgb(236 253 245 / 90%);
+  color: rgb(4 120 87 / 96%);
+}
+
+.setting-lifecycle-panel__hero--amber .setting-lifecycle-panel__hero-status-chip {
+  border-color: rgb(245 158 11 / 24%);
+  background-color: rgb(255 247 237 / 94%);
+  color: rgb(180 83 9 / 96%);
+}
+
+.setting-lifecycle-panel__hero--slate .setting-lifecycle-panel__hero-status-chip {
+  border-color: rgb(148 163 184 / 28%);
+  background-color: rgb(241 245 249 / 94%);
+  color: rgb(71 85 105 / 96%);
+}
+
+.setting-lifecycle-panel__hero--rose .setting-lifecycle-panel__hero-status-chip {
+  border-color: rgb(244 63 94 / 24%);
+  background-color: rgb(255 241 242 / 94%);
+  color: rgb(190 24 93 / 96%);
+}
+
+.setting-lifecycle-panel__action-card--emerald {
+  border-color: rgb(16 185 129 / 22%);
+  background: linear-gradient(90deg, rgb(236 253 245 / 90%), rgb(255 255 255 / 96%) 26%);
+  color: rgb(4 120 87 / 96%);
+}
+
+.setting-lifecycle-panel__action-card--amber {
+  border-color: rgb(245 158 11 / 22%);
+  background: linear-gradient(90deg, rgb(255 247 237 / 92%), rgb(255 255 255 / 96%) 26%);
+  color: rgb(180 83 9 / 96%);
+}
+
+.setting-lifecycle-panel__action-card--slate {
+  border-color: rgb(148 163 184 / 26%);
+  background: linear-gradient(90deg, rgb(241 245 249 / 92%), rgb(255 255 255 / 96%) 26%);
+  color: rgb(71 85 105 / 96%);
+}
+
+.setting-lifecycle-panel__action-card--rose {
+  border-color: rgb(244 63 94 / 22%);
+  background: linear-gradient(90deg, rgb(255 241 242 / 92%), rgb(255 255 255 / 96%) 26%);
+  color: rgb(190 24 93 / 96%);
+}
+
+.setting-lifecycle-panel__action-card--emerald:hover {
+  box-shadow: 0 10px 22px rgb(16 185 129 / 12%);
+}
+
+.setting-lifecycle-panel__action-card--amber:hover {
+  box-shadow: 0 10px 22px rgb(245 158 11 / 12%);
+}
+
+.setting-lifecycle-panel__action-card--slate:hover {
+  box-shadow: 0 10px 22px rgb(100 116 139 / 10%);
+}
+
+.setting-lifecycle-panel__action-card--rose:hover {
+  box-shadow: 0 10px 22px rgb(244 63 94 / 12%);
+}
+
+.setting-lifecycle-panel__action-card--emerald .setting-lifecycle-panel__action-name {
+  color: rgb(6 95 70 / 96%);
+}
+
+.setting-lifecycle-panel__action-card--amber .setting-lifecycle-panel__action-name {
+  color: rgb(146 64 14 / 96%);
+}
+
+.setting-lifecycle-panel__action-card--slate .setting-lifecycle-panel__action-name {
+  color: rgb(51 65 85 / 96%);
+}
+
+.setting-lifecycle-panel__action-card--rose .setting-lifecycle-panel__action-name {
+  color: rgb(159 18 57 / 96%);
+}
+
+@media (width <= 1280px) {
+  .setting-lifecycle-panel__layout {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (width <= 640px) {
+  .setting-lifecycle-panel__hero-top,
+  .setting-lifecycle-panel__action-head {
+    align-items: flex-start;
+  }
+}
+</style>

src/views/project/project/setting/modules/setting-team-panel.vue

@@ -0,0 +1,191 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+import { filterProjectMembers, formatProjectMemberDate, getProjectTeamTableHeight } from '../shared';
+
+defineOptions({ name: 'ProjectSettingTeamPanel' });
+
+interface Props {
+  members: Api.Project.ProjectMember[];
+  roleOptions?: Api.SystemManage.RoleSimple[];
+  loading?: boolean;
+  readonly?: boolean;
+}
+
+interface Emits {
+  (e: 'create'): void;
+  (e: 'edit', member: Api.Project.ProjectMember): void;
+  (e: 'remove', member: Api.Project.ProjectMember): void;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  loading: false,
+  readonly: false,
+  roleOptions: () => []
+});
+const emit = defineEmits<Emits>();
+const searchKeyword = ref('');
+const selectedRoleId = ref('');
+const teamTableHeight = getProjectTeamTableHeight(5);
+const roleFilterOptions = computed(() => {
+  const roleMap = new Map<string, string>();
+
+  props.roleOptions.forEach(role => {
+    if (!roleMap.has(role.id)) {
+      roleMap.set(role.id, role.name);
+    }
+  });
+
+  return [...roleMap.entries()].map(([value, label]) => ({
+    value,
+    label
+  }));
+});
+const filteredMembers = computed(() =>
+  filterProjectMembers(props.members, {
+    keyword: searchKeyword.value,
+    roleId: selectedRoleId.value
+  })
+);
+const hasFilter = computed(() => Boolean(searchKeyword.value.trim() || selectedRoleId.value));
+
+watch(roleFilterOptions, options => {
+  if (selectedRoleId.value && !options.some(item => item.value === selectedRoleId.value)) {
+    selectedRoleId.value = '';
+  }
+});
+
+function getMemberStatusLabel(status: Api.Project.ProjectMemberStatus) {
+  return status === 0 ? '有效' : '失效';
+}
+
+function getMemberStatusTagType(status: Api.Project.ProjectMemberStatus) {
+  return status === 0 ? 'success' : 'info';
+}
+</script>
+
+<template>
+  <ElCard class="card-wrapper">
+    <template #header>
+      <div class="setting-team-panel__header">
+        <div>
+          <h3 class="text-16px text-[#0f172a] font-700">团队管理</h3>
+        </div>
+        <div class="setting-team-panel__toolbar">
+          <ElSelect v-model="selectedRoleId" clearable placeholder="筛选角色" class="setting-team-panel__role-filter">
+            <ElOption
+              v-for="option in roleFilterOptions"
+              :key="option.value"
+              :label="option.label"
+              :value="option.value"
+            />
+          </ElSelect>
+          <ElInput v-model="searchKeyword" clearable placeholder="搜索成员姓名" class="setting-team-panel__search" />
+          <ElButton type="primary" plain :disabled="props.readonly" @click="emit('create')">新增成员</ElButton>
+        </div>
+      </div>
+    </template>
+
+    <ElTable
+      v-loading="props.loading"
+      :data="filteredMembers"
+      :height="teamTableHeight"
+      :empty-text="hasFilter ? '未找到匹配成员' : '暂无成员'"
+      border
+      row-key="id"
+    >
+      <ElTableColumn type="index" label="序号" width="64" align="center" />
+      <ElTableColumn prop="userNickname" label="成员姓名" min-width="140" />
+      <ElTableColumn prop="roleName" label="当前角色" min-width="140" />
+      <ElTableColumn label="成员状态" width="110" align="center">
+        <template #default="{ row }">
+          <ElTag :type="getMemberStatusTagType(row.status)">{{ getMemberStatusLabel(row.status) }}</ElTag>
+        </template>
+      </ElTableColumn>
+      <ElTableColumn prop="joinedTime" label="加入时间" min-width="132" align="center">
+        <template #default="{ row }">
+          {{ formatProjectMemberDate(row.joinedTime) }}
+        </template>
+      </ElTableColumn>
+      <ElTableColumn prop="leftTime" label="退出时间" min-width="170">
+        <template #default="{ row }">
+          {{ formatProjectMemberDate(row.leftTime) }}
+        </template>
+      </ElTableColumn>
+      <ElTableColumn prop="remark" label="备注" min-width="180" show-overflow-tooltip>
+        <template #default="{ row }">
+          {{ row.remark || '--' }}
+        </template>
+      </ElTableColumn>
+      <ElTableColumn label="操作" width="180" fixed="right" align="center">
+        <template #default="{ row }">
+          <div class="setting-team-panel__actions">
+            <ElButton
+              link
+              type="primary"
+              :disabled="props.readonly || row.status !== 0 || row.managerFlag"
+              @click="emit('edit', row)"
+            >
+              编辑
+            </ElButton>
+            <ElButton
+              link
+              type="danger"
+              :disabled="props.readonly || row.status !== 0 || row.managerFlag"
+              @click="emit('remove', row)"
+            >
+              移出成员
+            </ElButton>
+          </div>
+        </template>
+      </ElTableColumn>
+    </ElTable>
+  </ElCard>
+</template>
+
+<style scoped>
+.setting-team-panel__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.setting-team-panel__toolbar {
+  display: inline-flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.setting-team-panel__search {
+  width: 220px;
+}
+
+.setting-team-panel__role-filter {
+  width: 180px;
+}
+
+.setting-team-panel__actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 12px;
+}
+
+@media (width <= 768px) {
+  .setting-team-panel__header {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .setting-team-panel__toolbar {
+    width: 100%;
+  }
+
+  .setting-team-panel__search {
+    width: 100%;
+  }
+
+  .setting-team-panel__role-filter {
+    width: 100%;
+  }
+}
+</style>

src/views/project/project/setting/modules/status-action-dialog.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { computed, reactive, watch } from 'vue';
+import BusinessFormDialog from '@/components/custom/business-form-dialog.vue';
+
+defineOptions({ name: 'ProjectStatusActionDialog' });
+
+interface Props {
+  action: Api.Project.ProjectLifecycleAction | null;
+}
+
+interface Emits {
+  (e: 'submit', payload: Api.Project.ChangeProjectStatusParams): void;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits<Emits>();
+
+const visible = defineModel<boolean>('visible', {
+  default: false
+});
+
+const model = reactive({
+  reason: ''
+});
+
+const confirmDisabled = computed(() => Boolean(props.action?.needReason && !model.reason.trim()));
+
+function handleConfirm() {
+  if (!props.action) {
+    return;
+  }
+
+  emit('submit', {
+    id: '',
+    actionCode: props.action.actionCode,
+    reason: model.reason.trim() || null
+  });
+}
+
+watch(
+  () => visible.value,
+  value => {
+    if (!value) {
+      return;
+    }
+
+    model.reason = '';
+  }
+);
+</script>
+
+<template>
+  <BusinessFormDialog
+    v-model="visible"
+    :title="action ? action.actionName : '生命周期动作'"
+    preset="sm"
+    :confirm-disabled="confirmDisabled"
+    @confirm="handleConfirm"
+  >
+    <ElForm label-position="top">
+      <ElFormItem :label="action?.needReason ? '动作原因（必填）' : '动作原因（选填）'">
+        <ElInput
+          v-model="model.reason"
+          type="textarea"
+          :rows="4"
+          maxlength="500"
+          show-word-limit
+          placeholder="请输入动作原因"
+        />
+      </ElFormItem>
+    </ElForm>
+  </BusinessFormDialog>
+</template>

src/views/project/project/setting/shared.ts

@@ -0,0 +1,214 @@
+import dayjs from 'dayjs';
+
+export interface ProjectManagerMemberLike {
+  roleId: string;
+}
+
+interface ProjectTeamManageContext {
+  buttonCodes: readonly string[];
+}
+
+interface ProjectLifecycleStatusSummary {
+  tone: 'emerald' | 'amber' | 'slate' | 'rose';
+  caption: string;
+  description: string;
+}
+
+interface ProjectLifecycleActionCardMeta {
+  tone: 'emerald' | 'amber' | 'slate' | 'rose';
+  description: string;
+}
+
+export const projectSettingSectionKeys = ['base-info', 'team', 'lifecycle', 'danger'] as const;
+
+export type ProjectSettingSectionKey = (typeof projectSettingSectionKeys)[number];
+
+const projectBaseInfoReadonlyMessageMap: Partial<Record<Api.Project.ProjectStatusCode, string>> = {
+  paused: '当前项目已暂停，基础信息仅支持查看，不可编辑。',
+  completed: '当前项目已完成，基础信息仅支持查看，不可编辑。',
+  cancelled: '当前项目已取消，基础信息仅支持查看，不可编辑。',
+  archived: '当前项目已归档，基础信息仅支持查看，不可编辑。'
+};
+
+const projectLifecycleStatusSummaryMap: Record<Api.Project.ProjectStatusCode, ProjectLifecycleStatusSummary> = {
+  pending: {
+    tone: 'slate',
+    caption: '项目待开始',
+    description: '项目已创建，尚未进入真实推进阶段。'
+  },
+  active: {
+    tone: 'emerald',
+    caption: '项目推进中',
+    description: '当前可以暂停、完成或取消项目。'
+  },
+  paused: {
+    tone: 'amber',
+    caption: '项目已暂停',
+    description: '条件恢复后可重新推进，也可取消项目。'
+  },
+  completed: {
+    tone: 'emerald',
+    caption: '项目已完成',
+    description: '项目已完成，可按业务需要重新开启或归档。'
+  },
+  cancelled: {
+    tone: 'rose',
+    caption: '项目已取消',
+    description: '项目已取消，当前暂无可执行生命周期动作。'
+  },
+  archived: {
+    tone: 'slate',
+    caption: '项目已归档',
+    description: '项目已收口归档，当前暂无可执行生命周期动作。'
+  }
+};
+
+const projectLifecycleActionCardMetaMap: Record<
+  Exclude<Api.Project.ProjectStatusActionCode, 'auto_start'>,
+  ProjectLifecycleActionCardMeta
+> = {
+  pause: {
+    tone: 'amber',
+    description: '暂停当前项目，暂停期间不允许普通编辑和成员维护。'
+  },
+  resume: {
+    tone: 'emerald',
+    description: '恢复项目推进，重新进入进行中状态。'
+  },
+  complete: {
+    tone: 'emerald',
+    description: '确认项目完成，结束当前项目推进。'
+  },
+  cancel: {
+    tone: 'rose',
+    description: '取消当前项目，需要填写取消原因。'
+  },
+  reopen: {
+    tone: 'emerald',
+    description: '重新开启项目，恢复到进行中状态。'
+  },
+  archive: {
+    tone: 'slate',
+    description: '归档已完成项目，保留历史记录。'
+  }
+};
+
+const projectTeamTableHeaderHeight = 40;
+const projectTeamTableRowHeight = 40;
+
+export function shouldRequireProjectManagerHandover(
+  targetRoleId: string,
+  currentManager: ProjectManagerMemberLike | null | undefined
+) {
+  if (!currentManager?.roleId) {
+    return false;
+  }
+
+  return targetRoleId === currentManager.roleId;
+}
+
+export function getPreviousProjectManagerRoleOptions(
+  roleOptions: Api.SystemManage.RoleSimple[],
+  managerRoleId: string
+) {
+  return roleOptions.filter(role => role.id !== managerRoleId);
+}
+
+export function getProjectSettingSectionKeys() {
+  return [...projectSettingSectionKeys];
+}
+
+export function isProjectBaseInfoEditable(status: Api.Project.ProjectStatusCode | null | undefined) {
+  return status === 'pending' || status === 'active';
+}
+
+export function resolveVisibleProjectSettingSections(
+  sectionKeys: readonly ProjectSettingSectionKey[],
+  _buttonCodes: readonly string[]
+) {
+  return [...sectionKeys];
+}
+
+export function resolveVisibleProjectSettingSectionKey(
+  currentKey: ProjectSettingSectionKey | string | null | undefined,
+  visibleSectionKeys: readonly ProjectSettingSectionKey[]
+) {
+  if (!visibleSectionKeys.length) {
+    return 'base-info' satisfies ProjectSettingSectionKey;
+  }
+
+  if (currentKey && visibleSectionKeys.includes(currentKey as ProjectSettingSectionKey)) {
+    return currentKey as ProjectSettingSectionKey;
+  }
+
+  return visibleSectionKeys[0];
+}
+
+export function getProjectBaseInfoReadonlyMessage(status: Api.Project.ProjectStatusCode | null | undefined) {
+  if (!status || isProjectBaseInfoEditable(status)) {
+    return '';
+  }
+
+  return projectBaseInfoReadonlyMessageMap[status] || '当前项目状态不允许编辑基础信息。';
+}
+
+export function getProjectLifecycleStatusSummary(status: Api.Project.ProjectStatusCode) {
+  return projectLifecycleStatusSummaryMap[status];
+}
+
+export function getProjectLifecycleActionCardMeta(
+  actionCode: Exclude<Api.Project.ProjectStatusActionCode, 'auto_start'>
+) {
+  return projectLifecycleActionCardMetaMap[actionCode];
+}
+
+export function formatProjectMemberDate(value: string | number | null | undefined) {
+  if (value === null || value === undefined || value === '') {
+    return '--';
+  }
+
+  const normalizedValue = typeof value === 'string' && /^\d+$/.test(value) ? Number(value) : value;
+  const parsedDate = dayjs(normalizedValue);
+
+  if (!parsedDate.isValid()) {
+    return String(value);
+  }
+
+  return parsedDate.format('YYYY-MM-DD');
+}
+
+export function filterProjectMembers(
+  members: readonly Api.Project.ProjectMember[],
+  filters: {
+    keyword?: string | null | undefined;
+    roleId?: string | null | undefined;
+  }
+) {
+  const normalizedKeyword = String(filters.keyword || '')
+    .trim()
+    .toLocaleLowerCase();
+  const normalizedRoleId = String(filters.roleId || '').trim();
+
+  if (!normalizedKeyword && !normalizedRoleId) {
+    return [...members];
+  }
+
+  return members.filter(member => {
+    const matchesKeyword = !normalizedKeyword || member.userNickname.toLocaleLowerCase().includes(normalizedKeyword);
+    const matchesRole = !normalizedRoleId || member.roleId === normalizedRoleId;
+
+    return matchesKeyword && matchesRole;
+  });
+}
+
+export function getProjectTeamTableHeight(visibleRows: number) {
+  const normalizedRows = Math.max(0, visibleRows);
+
+  return projectTeamTableHeaderHeight + normalizedRows * projectTeamTableRowHeight;
+}
+
+export function canManageProjectTeam(context: ProjectTeamManageContext) {
+  return (
+    context.buttonCodes.includes('project:project:member') || context.buttonCodes.includes('project:project:update')
+  );
+}

src/views/project/shared/project-context-banner.vue

@@ -0,0 +1,115 @@
+<script setup lang="tsx">
+import { computed } from 'vue';
+import { getProjectStatusLabel, getProjectStatusTagType } from './project-master-data';
+import type { CurrentProjectSummary } from './project-context-shared';
+
+defineOptions({ name: 'ProjectContextBanner' });
+
+interface Props {
+  project: CurrentProjectSummary | null;
+  caption?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  caption: ''
+});
+
+const projectStatusCode = computed(() => props.project?.statusCode as Api.Project.ProjectStatusCode | undefined);
+
+const summaryItems = computed(() => {
+  if (!props.project) {
+    return [];
+  }
+
+  return [
+    { label: '项目 ID', value: props.project.id || '--' },
+    { label: '项目编码', value: props.project.projectCode || '--' },
+    { label: '项目类型', value: props.project.projectType || '--' },
+    { label: '项目负责人', value: props.project.managerUserId || '--' }
+  ];
+});
+</script>
+
+<template>
+  <ElCard class="project-context-banner card-wrapper">
+    <template v-if="project">
+      <div class="flex flex-col gap-20px lg:flex-row lg:items-start lg:justify-between">
+        <div class="min-w-0 flex-1">
+          <div class="mb-12px flex flex-wrap items-center gap-10px">
+            <span class="project-context-banner__code">{{ project.projectCode }}</span>
+            <ElTag v-if="projectStatusCode" :type="getProjectStatusTagType(projectStatusCode)" effect="light" round>
+              {{ getProjectStatusLabel(projectStatusCode) }}
+            </ElTag>
+          </div>
+          <div class="mb-10px flex flex-wrap items-center gap-12px">
+            <h2 class="text-24px text-[#0f172a] font-700">{{ project.projectName }}</h2>
+            <span v-if="caption" class="text-14px text-[#64748b]">{{ caption }}</span>
+          </div>
+          <div class="flex flex-wrap gap-x-18px gap-y-8px text-13px text-[#64748b] leading-22px">
+            <span>对象 ID：{{ project.id || '--' }}</span>
+            <span>类型：{{ project.projectType || '--' }}</span>
+            <span>项目负责人：{{ project.managerUserId || '--' }}</span>
+          </div>
+        </div>
+        <div class="project-context-banner__stats">
+          <div v-for="item in summaryItems" :key="item.label" class="project-context-banner__stat-card">
+            <span class="project-context-banner__stat-label">{{ item.label }}</span>
+            <strong class="project-context-banner__stat-value">{{ item.value }}</strong>
+          </div>
+        </div>
+      </div>
+    </template>
+    <ElEmpty v-else description="未获取到当前项目上下文" :image-size="84" />
+  </ElCard>
+</template>
+
+<style scoped>
+.project-context-banner {
+  overflow: hidden;
+  border: 1px solid rgb(226 232 240 / 88%);
+  background:
+    radial-gradient(circle at top left, rgb(14 165 233 / 10%), transparent 32%),
+    linear-gradient(135deg, rgb(255 255 255 / 98%), rgb(248 250 252 / 96%));
+}
+
+.project-context-banner__code {
+  display: inline-flex;
+  align-items: center;
+  height: 28px;
+  padding: 0 10px;
+  border-radius: 999px;
+  background-color: rgb(15 23 42 / 88%);
+  color: #fff;
+  font-size: 12px;
+  letter-spacing: 0.08em;
+}
+
+.project-context-banner__stats {
+  display: grid;
+  flex-shrink: 0;
+  grid-template-columns: repeat(2, minmax(132px, 1fr));
+  gap: 12px;
+  width: min(100%, 320px);
+}
+
+.project-context-banner__stat-card {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 14px;
+  border: 1px solid rgb(148 163 184 / 18%);
+  border-radius: 16px;
+  background-color: rgb(255 255 255 / 72%);
+}
+
+.project-context-banner__stat-label {
+  color: rgb(100 116 139 / 90%);
+  font-size: 12px;
+}
+
+.project-context-banner__stat-value {
+  color: rgb(15 23 42 / 94%);
+  font-size: 20px;
+  line-height: 1.2;
+}
+</style>

src/views/project/shared/project-context-shared.ts

@@ -0,0 +1,9 @@
+export interface CurrentProjectSummary {
+  id: string;
+  projectCode: string;
+  projectName: string;
+  projectType: string;
+  productId: string | null;
+  managerUserId: string;
+  statusCode: string;
+}

src/views/project/shared/project-master-data.ts

@@ -0,0 +1,87 @@
+import { transformRecordToOption } from '@/utils/common';
+
+/** 项目状态编码与中文标签映射 */
+export const projectStatusRecord: Record<Api.Project.ProjectStatusCode, string> = {
+  pending: '待开始',
+  active: '进行中',
+  paused: '已暂停',
+  completed: '已完成',
+  cancelled: '已取消',
+  archived: '已归档'
+};
+
+export const projectStatusOptions = transformRecordToOption(projectStatusRecord);
+
+/** 项目状态动作编码与中文标签映射 */
+export const projectStatusActionRecord: Record<Api.Project.ProjectStatusActionCode, string> = {
+  auto_start: '自动开始',
+  pause: '暂停项目',
+  resume: '恢复项目',
+  complete: '完成项目',
+  cancel: '取消项目',
+  reopen: '重新开启',
+  archive: '归档项目'
+};
+
+export function getProjectStatusLabel(status: Api.Project.ProjectStatusCode) {
+  return projectStatusRecord[status];
+}
+
+/** 根据项目状态返回对应的 Tag 类型，用于 ElTag 组件的颜色映射 */
+export function getProjectStatusTagType(status: Api.Project.ProjectStatusCode): UI.ThemeColor {
+  const statusTagTypeMap: Record<Api.Project.ProjectStatusCode, UI.ThemeColor> = {
+    pending: 'info',
+    active: 'success',
+    paused: 'warning',
+    completed: 'success',
+    cancelled: 'info',
+    archived: 'info'
+  };
+
+  return statusTagTypeMap[status];
+}
+
+/** 判断项目是否可编辑：pending / active / paused 状态允许编辑 */
+export function isProjectEditable(status: Api.Project.ProjectStatusCode) {
+  return status === 'active' || status === 'pending';
+}
+
+/** 判断项目编辑是否受限：paused / completed 状态只能编辑部分字段 */
+export function isProjectEditLimited(status: Api.Project.ProjectStatusCode) {
+  return status === 'paused' || status === 'completed';
+}
+
+/** 根据当前状态获取允许的状态动作列表 */
+export function getAllowedProjectStatusActions(
+  status: Api.Project.ProjectStatusCode
+): Array<Exclude<Api.Project.ProjectStatusActionCode, 'auto_start'>> {
+  const actionMap: Record<
+    Api.Project.ProjectStatusCode,
+    Array<Exclude<Api.Project.ProjectStatusActionCode, 'auto_start'>>
+  > = {
+    pending: ['cancel'],
+    active: ['pause', 'complete', 'cancel'],
+    paused: ['resume', 'cancel'],
+    completed: ['reopen', 'archive'],
+    cancelled: [],
+    archived: []
+  };
+
+  return actionMap[status];
+}
+
+export function getProjectStatusActionLabel(actionCode: Api.Project.ProjectStatusActionCode) {
+  return projectStatusActionRecord[actionCode];
+}
+
+export function getProjectStatusActionOptions(status: Api.Project.ProjectStatusCode) {
+  return getAllowedProjectStatusActions(status).map(actionCode => ({
+    value: actionCode,
+    label: getProjectStatusActionLabel(actionCode)
+  }));
+}
+
+/** 判断状态动作是否必须填写原因：resume 和 auto_start 不需要原因 */
+export function isProjectActionReasonRequired(actionCode: Api.Project.ProjectStatusActionCode) {
+  return actionCode !== 'resume' && actionCode !== 'auto_start';
+}

src/views/project/shared/use-current-project.ts

@@ -0,0 +1,42 @@
+import { computed } from 'vue';
+import { useObjectContextStore } from '@/store/modules/object-context';
+
+/**
+ * 获取当前项目上下文
+ */
+export function useCurrentProject() {
+  const objectContextStore = useObjectContextStore();
+
+  const currentObjectId = computed(() => objectContextStore.objectId);
+
+  const currentProject = computed(() => {
+    const summary = objectContextStore.objectSummary;
+
+    if (!summary) {
+      return null;
+    }
+
+    return ((summary as unknown as Api.Project.ProjectContext).currentProject || null) as
+      | Api.Project.ProjectContext['currentProject']
+      | null;
+  });
+
+  const currentRole = computed(() => {
+    const summary = objectContextStore.objectSummary;
+
+    if (!summary) {
+      return null;
+    }
+
+    return (summary as unknown as Api.Project.ProjectContext).currentRole || null;
+  });
+
+  const isGuest = computed(() => currentRole.value?.guestFlag ?? true);
+
+  return {
+    currentObjectId,
+    currentProject,
+    currentRole,
+    isGuest
+  };
+}

src/views/system/dict/index.vue

@@ -298,6 +298,14 @@ async function handleSearchDictType() {
   await getDictTypeList();
 }
 
+async function resetDictTypeSearchParams() {
+  const pageSize = dictTypeSearchParams.pageSize;
+
+  Object.assign(dictTypeSearchParams, getInitDictTypeSearchParams(), { pageSize });
+
+  await getDictTypeList();
+}
+
 async function handleSearchDictData() {
   dictDataSearchParams.pageNo = 1;
   await getDictDataByPage(1);
@@ -349,7 +357,11 @@ onMounted(() => {
     class="min-h-560px gap-16px overflow-hidden xl:grid xl:grid-cols-[360px_minmax(0,1fr)] lt-xl:flex lt-xl:flex-col lt-xl:overflow-auto"
   >
     <div class="flex-col-stretch gap-16px xl:min-h-0">
-      <DictTypeSearch v-model:model="dictTypeSearchParams" @search="handleSearchDictType" />
+      <DictTypeSearch
+        v-model:model="dictTypeSearchParams"
+        @reset="resetDictTypeSearchParams"
+        @search="handleSearchDictType"
+      />
       <ElCard v-loading="typeLoading" class="card-wrapper xl:flex-1-hidden" body-class="dict-type-card-body">
         <template #header>
           <div class="flex items-center justify-between gap-12px py-2px">

src/views/system/dict/modules/dict-data-search.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
+import { computed } from 'vue';
 import { dictStatusOptions } from '@/constants/business';
-import TableSearchPanel from '@/components/custom/table-search-panel.vue';
+import TableSearchFields, { type SearchField } from '@/components/custom/table-search-fields.vue';
 import { $t } from '@/locales';
 
 defineOptions({ name: 'DictDataSearch' });
@@ -9,7 +10,7 @@ interface Props {
   disabled?: boolean;
 }
 
-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
   disabled: false
 });
 
@@ -22,6 +23,25 @@ const emit = defineEmits<Emits>();
 
 const model = defineModel<Api.Dict.DictDataSearchParams>('model', { required: true });
 
+const fields = computed<SearchField[]>(() => [
+  {
+    key: 'label',
+    label: $t('page.system.dict.dictLabel'),
+    type: 'input',
+    placeholder: $t('page.system.dict.form.dictLabel')
+  },
+  {
+    key: 'status',
+    label: $t('page.system.dict.dictStatus'),
+    type: 'select',
+    placeholder: $t('page.system.dict.form.dictStatus'),
+    options: dictStatusOptions.map(item => ({
+      label: $t(item.label),
+      value: item.value
+    }))
+  }
+]);
+
 function handleReset() {
   emit('reset');
 }
@@ -32,37 +52,12 @@ function handleSearch() {
 </script>
 
 <template>
-  <TableSearchPanel
-    :model="model"
-    :disabled="disabled"
-    :action-col-lg="12"
-    :action-col-md="8"
+  <TableSearchFields
+    v-model="model"
+    :fields="fields"
+    :columns="3"
+    :disabled="props.disabled"
     @reset="handleReset"
     @search="handleSearch"
-  >
-    <ElCol :lg="6" :md="8" :sm="12">
-      <ElFormItem :label="$t('page.system.dict.dictLabel')" prop="label">
-        <ElInput
-          v-model="model.label"
-          clearable
-          :disabled="disabled"
-          :placeholder="$t('page.system.dict.form.dictLabel')"
-        />
-      </ElFormItem>
-    </ElCol>
-    <ElCol :lg="6" :md="8" :sm="12">
-      <ElFormItem :label="$t('page.system.dict.dictStatus')" prop="status">
-        <ElSelect
-          v-model="model.status"
-          clearable
-          :disabled="disabled"
-          :placeholder="$t('page.system.dict.form.dictStatus')"
-        >
-          <ElOption v-for="{ label, value } in dictStatusOptions" :key="value" :label="$t(label)" :value="value" />
-        </ElSelect>
-      </ElFormItem>
-    </ElCol>
-  </TableSearchPanel>
+  />
 </template>
-
-<style scoped></style>

src/views/system/menu/modules/menu-operate-dialog.vue

@@ -106,8 +106,6 @@ const title = computed(() => {
   return titleMap[props.operateType];
 });
 
-const dialogWidth = '780px';
-
 const model = ref(createDefaultModel());
 
 function getCurrentScopeParams(): Api.SystemManage.ScopeQueryParams {
@@ -1163,7 +1161,7 @@ watch(visible, value => {
   <BusinessFormDialog
     v-model="visible"
     :title="title"
-    :width="dialogWidth"
+    preset="lg"
     :loading="detailLoading"
     :confirm-loading="submitting"
     @confirm="handleSubmit"

src/views/system/menu/modules/menu-search.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
+import { computed } from 'vue';
 import { commonStatusOptions } from '@/constants/business';
-import TableSearchPanel from '@/components/custom/table-search-panel.vue';
+import TableSearchFields, { type SearchField } from '@/components/custom/table-search-fields.vue';
 import { $t } from '@/locales';
 
 defineOptions({ name: 'MenuSearch' });
@@ -22,6 +23,25 @@ const emit = defineEmits<Emits>();
 
 const model = defineModel<Api.SystemManage.MenuSearchParams>('model', { required: true });
 
+const fields = computed<SearchField[]>(() => [
+  {
+    key: 'name',
+    label: $t('page.system.menu.menuName'),
+    type: 'input',
+    placeholder: $t('page.system.menu.form.menuName')
+  },
+  {
+    key: 'status',
+    label: $t('page.system.menu.menuStatus'),
+    type: 'select',
+    placeholder: $t('page.system.menu.form.menuStatus'),
+    options: commonStatusOptions.map(item => ({
+      label: $t(item.label),
+      value: item.value
+    }))
+  }
+]);
+
 function reset() {
   emit('reset');
 }
@@ -32,27 +52,14 @@ function search() {
 </script>
 
 <template>
-  <TableSearchPanel
-    :model="model"
+  <TableSearchFields
+    v-model="model"
+    :fields="fields"
+    :columns="4"
     :disabled="props.disabled"
-    :action-col-lg="8"
-    :action-col-md="24"
     @reset="reset"
     @search="search"
-  >
-    <ElCol :lg="6" :md="8" :sm="12">
-      <ElFormItem :label="$t('page.system.menu.menuName')" prop="name">
-        <ElInput v-model="model.name" clearable :placeholder="$t('page.system.menu.form.menuName')" />
-      </ElFormItem>
-    </ElCol>
-    <ElCol :lg="6" :md="8" :sm="12">
-      <ElFormItem :label="$t('page.system.menu.menuStatus')" prop="status">
-        <ElSelect v-model="model.status" clearable class="w-full" :placeholder="$t('page.system.menu.form.menuStatus')">
-          <ElOption v-for="{ label, value } in commonStatusOptions" :key="value" :label="$t(label)" :value="value" />
-        </ElSelect>
-      </ElFormItem>
-    </ElCol>
-  </TableSearchPanel>
+  />
 </template>
 
 <style scoped></style>

src/views/system/post/modules/post-search.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, reactive, watch } from 'vue';
 import { postTypeOptions } from '@/constants/business';
-import TableSearchPanel from '@/components/custom/table-search-panel.vue';
+import TableSearchFields, { type SearchField } from '@/components/custom/table-search-fields.vue';
 
 defineOptions({ name: 'PostSearch' });
 
@@ -17,17 +17,69 @@ const statusOptions = [
   { label: '停用', value: 1 as const }
 ];
 
-const keyword = computed({
-  get() {
-    return model.value.name ?? model.value.code ?? '';
-  },
-  set(value: string) {
-    const text = value.trim() || undefined;
-    model.value.name = text;
-    model.value.code = text;
-  }
+const searchModel = reactive<{
+  keyword: string;
+  postType?: Api.SystemManage.PostType | null;
+  status?: Api.SystemManage.CommonStatus;
+}>({
+  keyword: '',
+  postType: undefined,
+  status: undefined
 });
 
+let syncingFromSource = false;
+
+watch(
+  () => [model.value.name, model.value.code, model.value.postType, model.value.status] as const,
+  ([name, code, postType, status]) => {
+    syncingFromSource = true;
+    searchModel.keyword = name ?? code ?? '';
+    searchModel.postType = postType;
+    searchModel.status = status;
+    syncingFromSource = false;
+  },
+  { immediate: true, flush: 'sync' }
+);
+
+watch(
+  () => [searchModel.keyword, searchModel.postType, searchModel.status] as const,
+  ([keywordValue, postType, status]) => {
+    if (syncingFromSource) {
+      return;
+    }
+
+    const keywordText = keywordValue.trim() || undefined;
+    model.value.name = keywordText;
+    model.value.code = keywordText;
+    model.value.postType = postType;
+    model.value.status = status;
+  },
+  { flush: 'sync' }
+);
+
+const fields = computed<SearchField[]>(() => [
+  {
+    key: 'keyword',
+    label: '岗位名称',
+    type: 'input',
+    placeholder: '请输入岗位名称或岗位编码'
+  },
+  {
+    key: 'postType',
+    label: '岗位类型',
+    type: 'select',
+    placeholder: '请选择岗位类型',
+    options: postTypeOptions
+  },
+  {
+    key: 'status',
+    label: '岗位状态',
+    type: 'select',
+    placeholder: '请选择岗位状态',
+    options: statusOptions
+  }
+]);
+
 function reset() {
   emit('reset');
 }
@@ -38,27 +90,7 @@ function search() {
 </script>
 
 <template>
-  <TableSearchPanel :model="model" :action-col-lg="8" @reset="reset" @search="search">
-    <ElCol :lg="8" :md="12" :sm="12">
-      <ElFormItem label="岗位名称" prop="name">
-        <ElInput v-model="keyword" clearable placeholder="请输入岗位名称或岗位编码" />
-      </ElFormItem>
-    </ElCol>
-    <ElCol :lg="8" :md="12" :sm="12">
-      <ElFormItem label="岗位类型" prop="postType">
-        <ElSelect v-model="model.postType" clearable placeholder="请选择岗位类型">
-          <ElOption v-for="{ label, value } in postTypeOptions" :key="value" :label="label" :value="value" />
-        </ElSelect>
-      </ElFormItem>
-    </ElCol>
-    <ElCol :lg="8" :md="12" :sm="12">
-      <ElFormItem label="岗位状态" prop="status">
-        <ElSelect v-model="model.status" clearable placeholder="请选择岗位状态">
-          <ElOption v-for="{ label, value } in statusOptions" :key="value" :label="label" :value="value" />
-        </ElSelect>
-      </ElFormItem>
-    </ElCol>
-  </TableSearchPanel>
+  <TableSearchFields v-model="searchModel" :fields="fields" :columns="4" @reset="reset" @search="search" />
 </template>
 
 <style scoped></style>

src/views/system/role/index.vue

@@ -429,10 +429,6 @@ getMenuTreeData();
   }
 }
 
-:deep(.el-row) {
-  margin: 0 0 -15px 0;
-}
-
 .role-card-header {
   display: flex;
   align-items: flex-start;

src/views/system/role/modules/role-operate-dialog.vue

@@ -167,24 +167,25 @@ watch(visible, value => {
   <BusinessFormDialog
     v-model="visible"
     :title="title"
-    preset="md"
+    preset="sm"
     :loading="detailLoading"
     :confirm-loading="submitting"
+    :scrollbar="false"
     @confirm="handleSubmit"
   >
     <ElForm ref="formRef" :model="model" :rules="rules" label-position="top">
       <ElRow :gutter="16">
-        <ElCol :span="12">
+        <ElCol :span="24">
           <ElFormItem :label="$t('page.system.role.roleName')" prop="name">
             <ElInput v-model="model.name" :placeholder="$t('page.system.role.form.roleName')" />
           </ElFormItem>
         </ElCol>
-        <ElCol :span="12">
+        <ElCol :span="24">
           <ElFormItem :label="$t('page.system.role.roleCode')" prop="code">
             <ElInput v-model="model.code" :placeholder="$t('page.system.role.form.roleCode')" />
           </ElFormItem>
         </ElCol>
-        <ElCol :span="12">
+        <ElCol :span="24">
           <ElFormItem :label="$t('page.system.role.sort')" prop="sort">
             <ElInputNumber
               v-model="model.sort"
@@ -194,7 +195,7 @@ watch(visible, value => {
             />
           </ElFormItem>
         </ElCol>
-        <ElCol :span="12">
+        <ElCol :span="24">
           <ElFormItem :label="$t('page.system.role.roleStatus')" prop="status">
             <ElRadioGroup v-model="model.status" class="business-form-radio-group">
               <ElRadio v-for="{ label, value } in commonStatusOptions" :key="value" :value="value">

src/views/system/role/modules/role-search.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, reactive, watch } from 'vue';
 import { commonStatusOptions } from '@/constants/business';
-import TableSearchPanel from '@/components/custom/table-search-panel.vue';
+import TableSearchFields, { type SearchField } from '@/components/custom/table-search-fields.vue';
 import { $t } from '@/locales';
 
 defineOptions({ name: 'RoleSearch' });
@@ -15,17 +15,61 @@ const emit = defineEmits<Emits>();
 
 const model = defineModel<Api.SystemManage.RoleSearchParams>('model', { required: true });
 
-const keyword = computed({
-  get() {
-    return model.value.name ?? model.value.code ?? '';
-  },
-  set(value: string) {
-    const text = value.trim() || undefined;
-    model.value.name = text;
-    model.value.code = text;
-  }
+const searchModel = reactive<{
+  keyword: string;
+  status?: Api.SystemManage.CommonStatus;
+}>({
+  keyword: '',
+  status: undefined
 });
 
+let syncingFromSource = false;
+
+watch(
+  () => [model.value.name, model.value.code, model.value.status] as const,
+  ([name, code, status]) => {
+    syncingFromSource = true;
+    searchModel.keyword = name ?? code ?? '';
+    searchModel.status = status;
+    syncingFromSource = false;
+  },
+  { immediate: true, flush: 'sync' }
+);
+
+watch(
+  () => [searchModel.keyword, searchModel.status] as const,
+  ([keywordValue, status]) => {
+    if (syncingFromSource) {
+      return;
+    }
+
+    const keywordText = keywordValue.trim() || undefined;
+    model.value.name = keywordText;
+    model.value.code = keywordText;
+    model.value.status = status;
+  },
+  { flush: 'sync' }
+);
+
+const fields = computed<SearchField[]>(() => [
+  {
+    key: 'keyword',
+    label: $t('page.system.role.searchKeyword'),
+    type: 'input',
+    placeholder: $t('page.system.role.searchPlaceholder')
+  },
+  {
+    key: 'status',
+    label: $t('page.system.role.roleStatus'),
+    type: 'select',
+    placeholder: $t('page.system.role.form.roleStatus'),
+    options: commonStatusOptions.map(item => ({
+      label: $t(item.label),
+      value: item.value
+    }))
+  }
+]);
+
 function reset() {
   emit('reset');
 }
@@ -36,20 +80,7 @@ function search() {
 </script>
 
 <template>
-  <TableSearchPanel :model="model" :action-col-lg="8" @reset="reset" @search="search">
-    <ElCol :lg="8" :md="12" :sm="12">
-      <ElFormItem :label="$t('page.system.role.searchKeyword')" prop="name">
-        <ElInput v-model="keyword" clearable :placeholder="$t('page.system.role.searchPlaceholder')" />
-      </ElFormItem>
-    </ElCol>
-    <ElCol :lg="8" :md="12" :sm="12">
-      <ElFormItem :label="$t('page.system.role.roleStatus')" prop="status">
-        <ElSelect v-model="model.status" clearable :placeholder="$t('page.system.role.form.roleStatus')">
-          <ElOption v-for="{ label, value } in commonStatusOptions" :key="value" :label="$t(label)" :value="value" />
-        </ElSelect>
-      </ElFormItem>
-    </ElCol>
-  </TableSearchPanel>
+  <TableSearchFields v-model="searchModel" :fields="fields" :columns="3" @reset="reset" @search="search" />
 </template>
 
 <style scoped></style>

src/views/system/user-management-relation/index.vue

@@ -134,7 +134,7 @@ async function loadTreeData() {
 
     if (!error) {
       treeData.value = data || [];
-      
+
       // 数据加载完成后，展开前两层节点
       await nextTick();
       expandFirstTwoLevels();
@@ -173,7 +173,7 @@ async function loadTreeDataByQuery(query: Api.SystemManage.UserManagementRelatio
 async function reloadTreeData() {
   // 保存当前展开状态
   saveExpandedState();
-  
+
   checkedNodeKeys.value = [];
   await loadTreeData();
   await nextTick();
@@ -236,10 +236,10 @@ const isAddFromTreeNode = ref(false);
  */
 function openAdd(item?: Api.SystemManage.UserManagementRelationTreeRespVO) {
   operateType.value = 'add';
-  
+
   // 如果是从树节点点击的新增按钮，标记为来自树节点
   isAddFromTreeNode.value = Boolean(item);
-  
+
   // 如果是从某一行的新增按钮触发，则默认上级为当前节点用户
   // 否则默认上级为当前登录用户（在对话框组件中处理）
   editingData.value = item
@@ -364,17 +364,17 @@ function saveExpandedState() {
 async function handleSubmitted(_relationId: string) {
   closeOperateModal();
   await reloadTreeData();
-  
+
   // 操作完成后恢复树节点的展开状态
   await restoreExpandedState();
-  
+
   // 重置标记
   isAddFromTreeNode.value = false;
 }
 
 /**
  * 展开所有子节点（递归）
- * 
+ *
  * @param tree 树形组件实例
  * @param nodes 节点数据数组
  */
@@ -389,7 +389,7 @@ function expandNodes(tree: InstanceType<typeof ElTree>, nodes: Api.SystemManage.
     if (treeNode) {
       treeNode.expand();
     }
-    
+
     // 递归展开子节点
     if (node.children && node.children.length > 0) {
       expandNodes(tree, node.children);
@@ -399,7 +399,7 @@ function expandNodes(tree: InstanceType<typeof ElTree>, nodes: Api.SystemManage.
 
 /**
  * 展开树的前两层节点
- * 
+ *
  * 只展开根节点和它们的直接子节点，第三层及更深层保持折叠
  */
 function expandFirstTwoLevels() {
@@ -414,7 +414,7 @@ function expandFirstTwoLevels() {
     if (treeNode) {
       treeNode.expand();
     }
-    
+
     // 展开第二层（根节点的直接子节点）
     if (rootNode.children && rootNode.children.length > 0) {
       for (const childNode of rootNode.children) {
@@ -429,12 +429,12 @@ function expandFirstTwoLevels() {
 
 /**
  * 恢复树节点的展开状态
- * 
+ *
  * 根据之前保存的展开状态，恢复对应的节点展开
  */
 async function restoreExpandedState() {
   await nextTick();
-  
+
   const tree = relationTreeRef.value;
   if (!tree || !expandedNodeKeys.value.length) {
     return;
@@ -496,7 +496,7 @@ onMounted(async () => {
     />
 
     <!-- 树形卡片区域 -->
-    <ElCard class="flex-1-hidden card-wrapper min-h-0">
+    <ElCard class="min-h-0 flex-1-hidden card-wrapper">
       <template #header>
         <div class="flex items-center justify-between gap-12px">
           <div class="flex items-center gap-10px">

src/views/system/user-management-relation/modules/relation-operate-dialog.vue

@@ -294,7 +294,7 @@ watch(visible, value => {
   <BusinessFormDialog
     v-model="visible"
     :title="title"
-    preset="md"
+    preset="sm"
     :loading="detailLoading"
     :confirm-loading="submitting"
     :scrollbar="false"
@@ -302,12 +302,12 @@ watch(visible, value => {
   >
     <ElForm ref="formRef" :model="model" :rules="rules" label-position="top">
       <ElRow :gutter="16">
-        <ElCol :span="12">
+        <ElCol :span="24">
           <ElFormItem label="上级用户" prop="managerUserId">
-            <ElSelect 
-              v-model="model.managerUserId" 
-              class="w-full" 
-              placeholder="请选择上级用户" 
+            <ElSelect
+              v-model="model.managerUserId"
+              class="w-full"
+              placeholder="请选择上级用户"
               filterable
               :disabled="props.operateType === 'add' && props.isAddFromTreeNode"
             >
@@ -315,7 +315,7 @@ watch(visible, value => {
             </ElSelect>
           </ElFormItem>
         </ElCol>
-        <ElCol :span="12">
+        <ElCol :span="24">
           <ElFormItem label="下级用户" prop="subordinateUserId">
             <ElSelect
               v-model="model.subordinateUserId"
@@ -330,7 +330,7 @@ watch(visible, value => {
         </ElCol>
       </ElRow>
       <ElRow :gutter="16">
-        <ElCol :span="12">
+        <ElCol :span="24">
           <ElFormItem label="生效开始时间" prop="effectiveFrom" style="width: 100%">
             <ElDatePicker
               v-model="model.effectiveFrom"
@@ -342,7 +342,7 @@ watch(visible, value => {
             />
           </ElFormItem>
         </ElCol>
-        <ElCol :span="12">
+        <ElCol :span="24">
           <ElFormItem label="生效结束时间" prop="effectiveUntil" style="width: 100%">
             <ElDatePicker
               v-model="model.effectiveUntil"

src/views/system/user/modules/user-operate-dialog.vue

@@ -226,7 +226,7 @@ watch(visible, async value => {
   <BusinessFormDialog
     v-model="visible"
     :title="title"
-    preset="lg"
+    preset="md"
     :loading="loading"
     :confirm-loading="submitting"
     max-body-height="70vh"

src/views/system/user/modules/user-org-leader-operate-dialog.vue

@@ -160,7 +160,7 @@ watch(visible, async value => {
   <BusinessFormDialog
     v-model="visible"
     :title="title"
-    preset="md"
+    preset="sm"
     :confirm-loading="submitting"
     :scrollbar="false"
     @confirm="handleSubmit"
@@ -168,12 +168,12 @@ watch(visible, async value => {
     <ElForm ref="formRef" :model="model" :rules="rules" label-position="top">
       <BusinessFormSection :title="$t('page.system.user.sections.basicInfo')">
         <ElRow :gutter="16">
-          <ElCol :span="12">
+          <ElCol :span="24">
             <ElFormItem :label="$t('page.system.user.deptName')">
               <ElInput :model-value="dept?.name || $t('common.noData')" disabled />
             </ElFormItem>
           </ElCol>
-          <ElCol :span="12">
+          <ElCol :span="24">
             <ElFormItem :label="$t('page.system.user.candidateUser')" prop="userId">
               <ElSelect
                 v-model="model.userId"
@@ -185,7 +185,7 @@ watch(visible, async value => {
               </ElSelect>
             </ElFormItem>
           </ElCol>
-          <ElCol :span="12">
+          <ElCol :span="24">
             <ElFormItem :label="$t('page.system.user.effectiveFrom')" prop="effectiveFrom" style="width: 100%">
               <ElDatePicker
                 v-model="model.effectiveFrom"
@@ -197,7 +197,7 @@ watch(visible, async value => {
               />
             </ElFormItem>
           </ElCol>
-          <ElCol :span="12">
+          <ElCol :span="24">
             <ElFormItem :label="$t('page.system.user.effectiveUntil')" prop="effectiveUntil" style="width: 100%">
               <ElDatePicker
                 v-model="model.effectiveUntil"

src/views/system/user/modules/user-org-operate-dialog.vue

@@ -194,7 +194,7 @@ watch(visible, async value => {
   <BusinessFormDialog
     v-model="visible"
     :title="title"
-    preset="md"
+    preset="sm"
     :confirm-loading="submitting"
     :scrollbar="false"
     @confirm="handleSubmit"
@@ -219,14 +219,14 @@ watch(visible, async value => {
             />
           </ElFormItem>
         </ElCol>
-        <ElCol :span="12">
+        <ElCol :span="24">
           <ElFormItem :label="$t('page.system.user.orgTypeLabel')" prop="orgType">
             <ElSelect v-model="model.orgType" :placeholder="$t('page.system.user.form.orgTypeLabel')">
               <ElOption v-for="item in orgTypeOptions" :key="item.value" :label="$t(item.label)" :value="item.value" />
             </ElSelect>
           </ElFormItem>
         </ElCol>
-        <ElCol :span="12">
+        <ElCol :span="24">
           <ElFormItem :label="$t('page.system.user.orgCode')" prop="code">
             <ElSelect v-if="isCodeSelectable" v-model="model.code" clearable filterable placeholder="请选择组织编码">
               <ElOption
@@ -239,7 +239,7 @@ watch(visible, async value => {
             <ElInput v-else v-model="model.code" :placeholder="$t('page.system.user.form.orgCode')" />
           </ElFormItem>
         </ElCol>
-        <ElCol :span="12">
+        <ElCol :span="24">
           <ElFormItem :label="$t('page.system.user.orgSort')" prop="sort">
             <ElInputNumber
               v-model="model.sort"
@@ -249,7 +249,7 @@ watch(visible, async value => {
             />
           </ElFormItem>
         </ElCol>
-        <ElCol :span="12">
+        <ElCol :span="24">
           <ElFormItem :label="$t('page.system.user.userStatus')" prop="status">
             <ElRadioGroup v-model="model.status" class="business-form-radio-group">
               <ElRadio v-for="item in commonStatusOptions" :key="item.value" :value="item.value">

src/views/system/user/modules/user-resigned-dialog.vue

@@ -118,16 +118,17 @@ watch(visible, async value => {
   >
     <ElForm ref="formRef" :model="model" label-position="top">
       <ElRow :gutter="16">
-        <ElCol :span="12">
+        <ElCol :span="24">
           <ElFormItem :label="$t('page.system.user.userName')">
             <ElInput :model-value="displayUsername" disabled />
           </ElFormItem>
         </ElCol>
-        <ElCol :span="12">
-          <ElFormItem :label="$t('page.system.user.resignedAt')">
+        <ElCol :span="24">
+          <ElFormItem :label="$t('page.system.user.resignedAt')" style="width: 100%">
             <ElDatePicker
               v-model="model.resignedAt"
               class="w-full"
+              style="width: 100%"
               type="datetime"
               clearable
               :placeholder="$t('page.system.user.form.resignedAt')"

src/views/system/user/modules/user-search.vue

@@ -1,9 +1,7 @@
 <script setup lang="ts">
-import { SYSTEM_USER_COMPANY_DICT_CODE } from '@/constants/dict';
+import { computed } from 'vue';
 import { commonStatusOptions } from '@/constants/business';
-import { translateOptions } from '@/utils/common';
-import DictSelect from '@/components/custom/dict-select.vue';
-import TableSearchPanel from '@/components/custom/table-search-panel.vue';
+import TableSearchFields from '@/components/custom/table-search-fields.vue';
 import { $t } from '@/locales';
 
 defineOptions({ name: 'UserSearch' });
@@ -13,7 +11,7 @@ interface Props {
   disabled?: boolean;
 }
 
-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
   disabled: false
 });
 
@@ -22,81 +20,61 @@ interface Emits {
   (e: 'search'): void;
 }
 
-defineEmits<Emits>();
+const emit = defineEmits<Emits>();
 
 const model = defineModel<Api.SystemManage.UserSearchParams>('model', { required: true });
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const fields = computed<any[]>(() => [
+  {
+    key: 'nickname',
+    label: $t('page.system.user.nickName'),
+    type: 'input',
+    placeholder: $t('page.system.user.form.nickName')
+  },
+  {
+    key: 'mobile',
+    label: $t('page.system.user.userPhone'),
+    type: 'input',
+    placeholder: $t('page.system.user.form.userPhone')
+  },
+  {
+    key: 'status',
+    label: $t('page.system.user.userStatus'),
+    type: 'select',
+    placeholder: $t('page.system.user.form.userStatus'),
+    options: commonStatusOptions.map(o => ({
+      label: $t(o.label as App.I18n.I18nKey),
+      value: o.value
+    }))
+  },
+  {
+    key: 'company',
+    label: '所属公司',
+    type: 'dict',
+    dictCode: 'system_user_company',
+    placeholder: '请选择所属公司'
+  },
+  {
+    key: 'roleId',
+    label: $t('page.system.user.userRole'),
+    type: 'select',
+    placeholder: $t('page.system.user.form.userRole'),
+    options: props.roleOptions.map(r => ({
+      label: r.name,
+      value: r.id
+    }))
+  }
+]);
 </script>
 
 <template>
-  <TableSearchPanel
-    :model="model"
+  <TableSearchFields
+    v-model="model"
+    :fields="fields"
+    :columns="3"
     :disabled="disabled"
-    :action-col-lg="24"
-    :action-col-md="24"
-    :action-col-sm="24"
-    @reset="$emit('reset')"
-    @search="$emit('search')"
-  >
-    <ElCol :lg="6" :md="8" :sm="12">
-      <ElFormItem :label="$t('page.system.user.nickName')" prop="nickname">
-        <ElInput
-          v-model="model.nickname"
-          clearable
-          :disabled="disabled"
-          :placeholder="$t('page.system.user.form.nickName')"
-        />
-      </ElFormItem>
-    </ElCol>
-    <ElCol :lg="6" :md="8" :sm="12">
-      <ElFormItem :label="$t('page.system.user.userPhone')" prop="mobile">
-        <ElInput
-          v-model="model.mobile"
-          clearable
-          :disabled="disabled"
-          :placeholder="$t('page.system.user.form.userPhone')"
-        />
-      </ElFormItem>
-    </ElCol>
-    <ElCol :lg="6" :md="8" :sm="12">
-      <ElFormItem :label="$t('page.system.user.userStatus')" prop="status">
-        <ElSelect
-          v-model="model.status"
-          clearable
-          :disabled="disabled"
-          :placeholder="$t('page.system.user.form.userStatus')"
-        >
-          <ElOption
-            v-for="{ label, value } in translateOptions(commonStatusOptions)"
-            :key="value"
-            :label="label"
-            :value="value"
-          />
-        </ElSelect>
-      </ElFormItem>
-    </ElCol>
-    <ElCol :lg="6" :md="8" :sm="12">
-      <ElFormItem label="所属公司" prop="company">
-        <DictSelect
-          v-model="model.company"
-          :dict-code="SYSTEM_USER_COMPANY_DICT_CODE"
-          filterable
-          :disabled="disabled"
-          placeholder="请选择所属公司"
-        />
-      </ElFormItem>
-    </ElCol>
-    <ElCol :lg="6" :md="8" :sm="12">
-      <ElFormItem :label="$t('page.system.user.userRole')" prop="roleId">
-        <ElSelect
-          v-model="model.roleId"
-          clearable
-          filterable
-          :disabled="disabled"
-          :placeholder="$t('page.system.user.form.userRole')"
-        >
-          <ElOption v-for="item in roleOptions" :key="item.id" :label="item.name" :value="item.id" />
-        </ElSelect>
-      </ElFormItem>
-    </ElCol>
-  </TableSearchPanel>
+    @search="emit('search')"
+    @reset="emit('reset')"
+  />
 </template>