style: заметный комментарий согласующего в маршруте

Мелкий серый текст под именем согласующего пользователи не замечали,
а там бывает причина возврата или отклонения. Теперь это плашка:
светлый фон, полоса слева, обычный размер шрифта. Действует во всех формах.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>

src/webparts/requestPortal/forms/Vacation/README.md

@@ -28,6 +28,9 @@
 - **Даты окончания нет**: отпуск задаётся началом и количеством дней, чтобы не считать
   праздники и выходные. Колонка `EndDate` не используется: из провижининга, типа контента и представления она убрана (само системное поле SharePoint `FromBaseType` удалить нельзя).
 - **Заголовок элемента** (`Title`): `Отпуск — {ФИО} — дд.мм.гггг`.
+- **Комментарий** (с 10-28, `VacationComment`, Note) — необязательный, заполняет инициатор,
+  последним полем секции; в просмотре пустой не показывается. В DOCX для ЭДО (`vacationDocument.ts`) не идёт; при печати
+  просмотра виден, как остальные поля секции.
 
 ## Подписание в ЭДО
 > **Сейчас выключено** (`VACATION_EDO_SIGNING_ENABLED = false` в `shared/config.ts`): решение последнего
@@ -71,7 +74,7 @@
   SLA на бэкенде approval-route этот код не вызывает — такое заявление на подпись не уйдёт.
 
 ## Секции формы
-RequestSection (сотрудник · должность · дата начала · количество дней)
+RequestSection (сотрудник · должность · дата начала · количество дней · замещающий · комментарий)
 
 ## Точки входа
 - rptype: `hr-vacation`

src/webparts/requestPortal/forms/Vacation/load.ts

@@ -34,6 +34,7 @@ export async function loadVacationRequest(itemId: number, listId?: string): Prom
       'DepartmentId',
       'Project',
       'ProjectId',
+      'VacationComment',
       'RequestStatus',
       'RequestUniqueCode',
       'Employee/Title',
@@ -58,7 +59,8 @@ export async function loadVacationRequest(itemId: number, listId?: string): Prom
     Department: (item.Department as string) || '',
     DepartmentId: (item.DepartmentId as string) || '',
     Project: (item.Project as string) || '',
-    ProjectId: (item.ProjectId as string) || ''
+    ProjectId: (item.ProjectId as string) || '',
+    VacationComment: (item.VacationComment as string) || ''
   };
 
   return {

src/webparts/requestPortal/forms/Vacation/model.ts

@@ -44,6 +44,8 @@ export interface IFormData {
   Project: string;
   /** oid проекта ('' — если введён вручную без выбора из списка). */
   ProjectId: string;
+  /** Комментарий инициатора к заявке — необязательный, для согласующих. */
+  VacationComment: string;
 }
 
 /** Обновление одного поля формы с сохранением типа значения. */
@@ -73,7 +75,8 @@ export const EMPTY_DATA: IFormData = {
   Department: '',
   DepartmentId: '',
   Project: '',
-  ProjectId: ''
+  ProjectId: '',
+  VacationComment: ''
 };
 
 /** Плейсхолдер для поля выбора сотрудника. */

src/webparts/requestPortal/forms/Vacation/provisioning.json

@@ -13,6 +13,7 @@
     { "internalName": "Department", "title": "Подразделение", "type": "Text" },
     { "internalName": "DepartmentId", "title": "Id подразделения (справочник)", "type": "Text" },
     { "internalName": "Project", "title": "Проект", "type": "Text" },
-    { "internalName": "ProjectId", "title": "Id проекта (справочник)", "type": "Text" }
+    { "internalName": "ProjectId", "title": "Id проекта (справочник)", "type": "Text" },
+    { "internalName": "VacationComment", "title": "Комментарий", "type": "Note" }
   ]
 }

src/webparts/requestPortal/forms/Vacation/sections/RequestSection.tsx

@@ -1,60 +1,75 @@
 import * as React from 'react';
-import { FormGrid, FormField, TextInput, PeopleField, OrganizationTable } from '../../../shared/ui';
+import { FormGrid, FormField, TextInput, TextArea, PeopleField, OrganizationTable, useFormReadOnly } from '../../../shared/ui';
 import { ProjectPicker } from '../../../shared/dictionary';
 import { ISectionProps, EMPLOYEE_PLACEHOLDER, SUBSTITUTE_PLACEHOLDER, MIN_NOTICE_DAYS, MAX_DAYS } from '../model';
 import { isoDatePlusDays } from '../../../shared/dateUtils';
 
 /** Единственная секция формы «Заявка на отпуск»: сотрудник (должность и подразделение подтягиваются из справочника), даты. */
-export const RequestSection: React.FC<ISectionProps> = ({ data, set, context, onEmployeeChange, printOrgIndex }) => (
+export const RequestSection: React.FC<ISectionProps> = ({ data, set, context, onEmployeeChange, printOrgIndex }) => {
-  <FormGrid>
+  const readOnly = useFormReadOnly();
-    <FormField label="Сотрудник" htmlFor="Employee" required full>
+
-      <PeopleField
+  return (
-        context={context}
+    <FormGrid>
-        value={data.Employee}
+      <FormField label="Сотрудник" htmlFor="Employee" required full>
-        onChange={onEmployeeChange ?? ((v) => set('Employee', v))}
+        <PeopleField
-        placeholder={EMPLOYEE_PLACEHOLDER}
+          context={context}
-      />
+          value={data.Employee}
-    </FormField>
+          onChange={onEmployeeChange ?? ((v) => set('Employee', v))}
-    <OrganizationTable value={data.Organization} printIndex={printOrgIndex} />
+          placeholder={EMPLOYEE_PLACEHOLDER}
-    <FormField label="Проект" htmlFor="Project">
+        />
-      <ProjectPicker
+      </FormField>
-        id="Project"
+      <OrganizationTable value={data.Organization} printIndex={printOrgIndex} />
-        context={context}
+      <FormField label="Проект" htmlFor="Project">
-        value={data.Project}
+        <ProjectPicker
-        onChange={(name, id) => {
+          id="Project"
-          set('Project', name);
+          context={context}
-          set('ProjectId', id);
+          value={data.Project}
-        }}
+          onChange={(name, id) => {
-        placeholder="Начните вводить название или код проекта…"
+            set('Project', name);
-      />
+            set('ProjectId', id);
-    </FormField>
+          }}
-    <FormField label="Дата начала" htmlFor="StartDate" required>
+          placeholder="Начните вводить название или код проекта…"
-      <TextInput
+        />
-        id="StartDate"
+      </FormField>
-        type="date"
+      <FormField label="Дата начала" htmlFor="StartDate" required>
-        value={data.StartDate}
+        <TextInput
-        onChange={(v) => set('StartDate', v)}
+          id="StartDate"
-        min={isoDatePlusDays(MIN_NOTICE_DAYS)}
+          type="date"
-      />
+          value={data.StartDate}
-    </FormField>
+          onChange={(v) => set('StartDate', v)}
-    <FormField label="Количество дней" htmlFor="DaysCount" required>
+          min={isoDatePlusDays(MIN_NOTICE_DAYS)}
-      <TextInput
+        />
-        id="DaysCount"
+      </FormField>
-        type="number"
+      <FormField label="Количество дней" htmlFor="DaysCount" required>
-        value={data.DaysCount}
+        <TextInput
-        onChange={(v) => set('DaysCount', v)}
+          id="DaysCount"
-        min={1}
+          type="number"
-        max={MAX_DAYS}
+          value={data.DaysCount}
-        placeholder={`от 1 до ${MAX_DAYS}`}
+          onChange={(v) => set('DaysCount', v)}
-      />
+          min={1}
-    </FormField>
+          max={MAX_DAYS}
-    <FormField label="Лицо, замещающее на время отсутствия" htmlFor="Substitute" full>
+          placeholder={`от 1 до ${MAX_DAYS}`}
-      <PeopleField
+        />
-        context={context}
+      </FormField>
-        value={data.Substitute}
+      <FormField label="Лицо, замещающее на время отсутствия" htmlFor="Substitute" full>
-        onChange={(v) => set('Substitute', v)}
+        <PeopleField
-        placeholder={SUBSTITUTE_PLACEHOLDER}
+          context={context}
-      />
+          value={data.Substitute}
-    </FormField>
+          onChange={(v) => set('Substitute', v)}
-  </FormGrid>
+          placeholder={SUBSTITUTE_PLACEHOLDER}
-);
+        />
+      </FormField>
+      {/* Пустой комментарий в просмотре не показываем — пустое поле только мешает читать. */}
+      {(!readOnly || data.VacationComment.trim()) && (
+        <FormField label="Комментарий" htmlFor="VacationComment" full>
+          <TextArea
+            id="VacationComment"
+            value={data.VacationComment}
+            onChange={(v) => set('VacationComment', v)}
+            rows={3}
+          />
+        </FormField>
+      )}
+    </FormGrid>
+  );
+};

src/webparts/requestPortal/forms/Vacation/submit.ts

@@ -43,7 +43,8 @@ function buildItem(
     Department: data.Department || null,
     DepartmentId: data.DepartmentId || null,
     Project: data.Project || null,
-    ProjectId: data.ProjectId || null
+    ProjectId: data.ProjectId || null,
+    VacationComment: data.VacationComment.trim() || null
   };
 }
 

src/webparts/requestPortal/shared/approval/ui/approval.module.scss

@@ -157,20 +157,27 @@
   }
 }
 
-// Комментарий решения — мелким текстом под именем согласующего (в той же ячейке,
+// Комментарий решения — плашкой под именем согласующего (в той же ячейке,
 // а не отдельной строкой: иначе ломается rowSpan колонки «Шаг» у параллельных).
+// Плашка, а не мелкий серый текст: пользователи его не замечали, а там бывает
+// причина возврата/отклонения.
 .commentInline {
   display: block;
-  margin-top: 3px;
+  margin-top: $sp-1;
-  font-size: $fs-caption;
+  padding: 6px 10px;
-  color: $gray-500;
+  border-left: 3px solid $navy-600;
+  border-radius: 0 $r-sm $r-sm 0;
+  background: $navy-100;
+  font-size: $fs-sm;
+  color: $gray-900;
   line-height: 1.45;
   white-space: pre-wrap; // сохранить переносы строк из комментария
+  overflow-wrap: anywhere; // длинная ссылка без пробелов не распирает ячейку
 }
 
 .commentLabel {
-  color: $gray-400;
+  color: $navy-800;
-  font-weight: 500;
+  font-weight: 600;
 }
 
 // Пометка «доп. согласующий, добавил: …» — под именем согласующего. Золотой