Merge design_ui_v2 into design_ui so the new design system can be previewed without dropping later product work.

Co-authored-by: Cursor <cursoragent@cursor.com>

apps/web/src/views/AutomationsSettingsView.vue

@@ -2,6 +2,12 @@
 import { computed, onMounted, ref, watch } from 'vue';
 import axios from 'axios';
 import { api } from '@/lib/api';
+import {
+  UiBadge,
+  UiButton,
+  UiInput,
+  UiPageHeader,
+} from '@/components/ui';
 import UiIcon from '@/components/UiIcon.vue';
 import AutomationCanvas from '@/components/automations/AutomationCanvas.vue';
 import type { AutomationAddPayload } from '@/components/automations/AutomationCanvas.vue';
@@ -138,39 +144,46 @@ function confirmLeave() {
 function startNew() {
   if (!confirmLeave()) return;
   hydrate(null);
-  ok.value = '';
 }
 
 function openRule(row: AutomationRuleDto) {
   if (editingId.value === row.id) return;
   if (!confirmLeave()) return;
   hydrate(row);
-  ok.value = '';
 }
 
 function addStep(payload: AutomationAddPayload, index: number) {
-  if (steps.value.length >= MAX_AUTOMATION_STEPS) return;
-  const step = payload.kind === 'condition' ? makeCondition() : makeStep(payload.action);
+  if (steps.value.length >= MAX_AUTOMATION_STEPS) {
+    error.value = `حداکثر ${toFaDigits(MAX_AUTOMATION_STEPS)} مرحله در هر قانون مجاز است.`;
+    return;
+  }
+  error.value = '';
+  const step =
+    payload.kind === 'condition'
+      ? makeCondition()
+      : makeStep(payload.action);
   steps.value.splice(index, 0, step);
   selected.value = step.id;
 }
 
-function removeStep(id: string) {
-  const target = steps.value.find((s) => s.id === id);
-  if (!target) return;
-  const actionCount = steps.value.filter((s) => !isAutomationCondition(s)).length;
-  if (!isAutomationCondition(target) && actionCount <= 1) return;
-  if (steps.value.length <= 1) return;
-  steps.value = steps.value.filter((s) => s.id !== id);
-  if (selected.value === id) selected.value = 'trigger';
+function removeStep(stepId: string) {
+  if (steps.value.length <= 1) {
+    error.value = 'حداقل یک مرحله باید در زنجیره باقی بماند.';
+    return;
+  }
+  const i = steps.value.findIndex((s) => s.id === stepId);
+  if (i < 0) return;
+  steps.value.splice(i, 1);
+  if (selected.value === stepId) {
+    const next = steps.value[Math.max(0, i - 1)];
+    selected.value = next?.id ?? 'trigger';
+  }
 }
 
 function chainLabel(row: AutomationRuleDto) {
-  const chain = normalizeAutomationSteps(row.action, row.config);
-  if (chain.length <= 1) {
-    return `${AUTOMATION_TRIGGER_LABELS[row.trigger]} → ${AUTOMATION_ACTION_LABELS[row.action]}`;
-  }
-  return `${AUTOMATION_TRIGGER_LABELS[row.trigger]} → ${toFaDigits(chain.length)} عمل`;
+  const t = AUTOMATION_TRIGGER_LABELS[row.trigger] ?? row.trigger;
+  const a = AUTOMATION_ACTION_LABELS[row.action] ?? row.action;
+  return `${t} ← ${a}`;
 }
 
 async function load() {
@@ -184,8 +197,9 @@ async function load() {
     items.value = rulesRes.data;
     users.value = usersRes.data;
     if (editingId.value) {
-      const current = items.value.find((r) => r.id === editingId.value);
-      if (current && !dirty.value) hydrate(current);
+      const cur = items.value.find((x) => x.id === editingId.value);
+      if (cur && !dirty.value) hydrate(cur);
+      else if (!cur) hydrate(items.value[0] ?? null);
     }
   } catch (e) {
     error.value = errText(e, 'بارگذاری اتوماسیون ناموفق بود.');
@@ -196,7 +210,7 @@ async function load() {
 
 async function save() {
   const action = firstAutomationAction(steps.value);
-  if (!canSave.value || !action) {
+  if (!name.value.trim() || !action) {
     error.value = !action ? 'حداقل یک عمل در زنجیره لازم است.' : 'نام قانون را وارد کنید.';
     return;
   }
@@ -279,31 +293,31 @@ watch(trigger, (next) => {
 </script>
 
 <template>
-  <section class="page">
-    <header class="page-head">
-      <div class="head-copy">
-        <h1>اتوماسیون گردش کار</h1>
-        <p class="lead">
-          مثل یک بوم کاری: گره «اگر» را به چند عمل پشت‌سرهم وصل کنید.
-        </p>
-      </div>
-      <div class="head-actions">
-        <button class="btn ghost" type="button" :disabled="loading" @click="load">
+  <section class="crm-page">
+    <UiPageHeader
+      title="اتوماسیون"
+      lead="مثل یک بوم کاری: گره «اگر» را به چند عمل پشت‌سرهم وصل کنید."
+    >
+      <template #actions>
+        <UiButton variant="ghost" :disabled="loading" @click="load">
           بروزرسانی
-        </button>
-        <button class="btn primary" type="button" @click="startNew">
+        </UiButton>
+        <UiButton variant="primary" @click="startNew">
           <UiIcon name="plus" :size="16" />
           قانون جدید
-        </button>
-      </div>
-    </header>
+        </UiButton>
+      </template>
+    </UiPageHeader>
 
-    <p v-if="error" class="error">{{ error }}</p>
-    <p v-if="ok" class="ok">{{ ok }}</p>
+    <p v-if="error" class="error-msg">{{ error }}</p>
+    <p v-if="ok" class="ok-msg">{{ ok }}</p>
 
     <div class="workspace">
       <aside class="rules">
-        <h2>قوانین</h2>
+        <div class="rules-head">
+          <h2>قوانین</h2>
+          <UiBadge variant="neutral" size="sm">{{ items.length }} قانون</UiBadge>
+        </div>
         <ul>
           <li
             v-for="row in items"
@@ -311,16 +325,21 @@ watch(trigger, (next) => {
             :class="{ on: editingId === row.id }"
           >
             <button class="pick" type="button" @click="openRule(row)">
-              <strong>{{ row.name }}</strong>
-              <span>{{ chainLabel(row) }}</span>
+              <div class="pick-top">
+                <strong>{{ row.name }}</strong>
+                <UiBadge :variant="row.isActive ? 'success' : 'neutral'" size="sm" dot>
+                  {{ row.isActive ? 'فعال' : 'غیرفعال' }}
+                </UiBadge>
+              </div>
+              <span class="chain-preview">{{ chainLabel(row) }}</span>
             </button>
             <div class="mini">
-              <button type="button" @click="toggleActive(row)">
-                {{ row.isActive ? 'فعال' : 'غیرفعال' }}
-              </button>
-              <button class="danger" type="button" @click="removeRule(row.id)">
+              <UiButton variant="ghost" size="sm" @click="toggleActive(row)">
+                {{ row.isActive ? 'غیرفعال‌سازی' : 'فعال‌سازی' }}
+              </UiButton>
+              <UiButton variant="danger" size="sm" @click="removeRule(row.id)">
                 حذف
-              </button>
+              </UiButton>
             </div>
           </li>
         </ul>
@@ -329,22 +348,23 @@ watch(trigger, (next) => {
 
       <div class="studio">
         <div class="toolbar">
-          <label class="name">
-            نام قانون
-            <input v-model="name" type="text" required minlength="2" maxlength="120" />
-          </label>
+          <div class="name-field">
+            <span class="name-label">نام قانون:</span>
+            <UiInput v-model="name" required minlength="2" maxlength="120" placeholder="نام قانون اتوماسیون…" />
+          </div>
           <label class="check">
             <input v-model="isActive" type="checkbox" />
-            فعال
+            <span>فعال</span>
           </label>
-          <button
-            class="btn primary"
+          <UiButton
+            variant="primary"
             type="button"
             :disabled="saving || !canSave"
+            :loading="saving"
             @click="save"
           >
-            {{ saving ? 'در حال ذخیره…' : editingId ? 'ذخیره' : 'ساخت' }}
-          </button>
+            {{ saving ? 'در حال ذخیره…' : editingId ? 'ذخیره قانون' : 'ساخت قانون' }}
+          </UiButton>
         </div>
 
         <div class="stage">
@@ -369,69 +389,53 @@ watch(trigger, (next) => {
 </template>
 
 <style scoped>
-.page {
-  display: grid;
-  gap: 1rem;
-  min-width: 0;
+.error-msg {
+  color: var(--color-danger);
+  font-size: var(--fs-sm);
+  font-weight: 600;
+  margin: 0;
 }
 
-.page-head {
-  display: flex;
-  justify-content: space-between;
-  gap: 1rem;
-  flex-wrap: wrap;
-  align-items: flex-start;
-}
-
-.head-copy {
-  min-width: 0;
-}
-
-.head-actions {
-  display: flex;
-  gap: 0.55rem;
-  flex-wrap: wrap;
-}
-
-h1 {
-  margin: 0 0 0.3rem;
-  font-size: clamp(1.45rem, 2.5vw, 1.85rem);
-  font-weight: 800;
-}
-
-.lead,
-.muted {
+.ok-msg {
+  color: var(--color-success);
+  font-size: var(--fs-sm);
+  font-weight: 600;
   margin: 0;
-  color: #64748b;
 }
 
 .workspace {
   display: grid;
   grid-template-columns: 1fr;
-  gap: 0.9rem;
+  gap: var(--sp-4);
   align-items: start;
   min-width: 0;
 }
 
 .rules,
 .studio {
-  border: 1px solid #e2e8f0;
-  border-radius: 18px;
-  background: #fff;
-  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-xl);
+  background: var(--color-surface);
+  box-shadow: var(--shadow-sm);
 }
 
 .rules {
-  padding: 1rem;
+  padding: var(--sp-4);
   display: grid;
-  gap: 0.7rem;
+  gap: var(--sp-3);
   align-content: start;
 }
 
-h2 {
+.rules-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.rules-head h2 {
   margin: 0;
-  font-size: 1rem;
-  font-weight: 800;
+  font-size: var(--fs-base);
+  font-weight: 700;
 }
 
 .rules ul {
@@ -439,7 +443,7 @@ h2 {
   margin: 0;
   padding: 0;
   display: grid;
-  gap: 0.45rem;
+  gap: var(--sp-2);
 }
 
 .rules ul:empty {
@@ -447,21 +451,22 @@ h2 {
 }
 
 .rules li {
-  border: 1px solid #e8eef3;
-  border-radius: 14px;
-  padding: 0.55rem 0.65rem 0.45rem;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  padding: var(--sp-3);
   display: grid;
-  gap: 0.35rem;
+  gap: var(--sp-2);
+  transition: all var(--transition-fast);
 }
 
 .rules li.on {
-  border-color: #99f6e4;
-  background: #f0fdfa;
+  border-color: var(--color-primary);
+  background: var(--color-primary-surface);
 }
 
 .pick {
   display: grid;
-  gap: 0.15rem;
+  gap: var(--sp-1);
   text-align: start;
   border: 0;
   background: none;
@@ -469,80 +474,76 @@ h2 {
   cursor: pointer;
   font: inherit;
   color: inherit;
+  width: 100%;
 }
 
-.pick strong {
-  font-size: 0.9rem;
+.pick-top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--sp-2);
+  width: 100%;
 }
 
-.pick span {
-  color: #64748b;
-  font-size: 0.75rem;
+.pick-top strong {
+  font-size: var(--fs-sm);
+  color: var(--color-text-emphasis);
+}
+
+.chain-preview {
+  color: var(--color-text-muted);
+  font-size: var(--fs-xs);
 }
 
 .mini {
   display: flex;
-  gap: 0.65rem;
-}
-
-.mini button {
-  border: 0;
-  background: none;
-  color: #0f766e;
-  cursor: pointer;
-  font: inherit;
-  font-size: 0.78rem;
-  font-weight: 700;
-  padding: 0;
-}
-
-.mini .danger {
-  color: #b91c1c;
+  gap: var(--sp-2);
+  justify-content: flex-end;
+  border-top: 1px dashed var(--color-border);
+  padding-top: var(--sp-2);
 }
 
 .studio {
-  padding: 0.85rem;
+  padding: var(--sp-4);
   display: grid;
-  gap: 0.75rem;
+  gap: var(--sp-3);
   min-width: 0;
 }
 
 .toolbar {
   display: flex;
   flex-wrap: wrap;
-  gap: 0.7rem;
-  align-items: end;
+  gap: var(--sp-3);
+  align-items: center;
 }
 
-.name {
-  display: grid;
-  gap: 0.3rem;
-  font-size: 0.82rem;
-  color: #64748b;
-  flex: 1 1 14rem;
+.name-field {
+  display: flex;
+  align-items: center;
+  gap: var(--sp-2);
+  flex: 1 1 16rem;
 }
 
-.name input {
-  border: 1px solid #e2e8f0;
-  border-radius: 12px;
-  padding: 0.55rem 0.7rem;
-  font: inherit;
-  color: #0f172a;
+.name-label {
+  font-size: var(--fs-sm);
+  font-weight: 600;
+  color: var(--color-text-muted);
+  white-space: nowrap;
 }
 
 .check {
   display: flex;
   align-items: center;
-  gap: 0.4rem;
-  color: #334155;
-  font-size: 0.88rem;
-  padding-bottom: 0.45rem;
+  gap: var(--sp-2);
+  color: var(--color-text);
+  font-size: var(--fs-sm);
+  cursor: pointer;
 }
 
 .stage {
   display: grid;
   grid-template-columns: minmax(0, 1fr);
-  gap: 0.75rem;
+  gap: var(--sp-3);
   min-width: 0;
 }
 
@@ -551,46 +552,9 @@ h2 {
   min-width: 0;
 }
 
-.btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.35rem;
-  min-height: var(--control-h);
-  padding: 0 0.95rem;
-  border-radius: var(--radius);
-  font-weight: 700;
-  border: 1px solid transparent;
-  cursor: pointer;
-  font: inherit;
-}
-
-.btn.primary {
-  background: #14b8a6;
-  color: #fff;
-  box-shadow: 0 8px 18px rgba(20, 184, 166, 0.24);
-}
-
-.btn.primary:disabled {
-  opacity: 0.55;
-  cursor: not-allowed;
-}
-
-.btn.ghost {
-  background: #fff;
-  color: #0f766e;
-  border-color: #99f6e4;
-}
-
-.error {
-  margin: 0;
-  color: #b91c1c;
-}
-
-.ok {
-  margin: 0;
-  color: #0f766e;
-  font-weight: 600;
+.muted {
+  color: var(--color-text-muted);
+  font-size: var(--fs-sm);
 }
 
 @media (min-width: 1280px) {
@@ -624,7 +588,7 @@ h2 {
   .toolbar {
     grid-area: toolbar;
     border: 1px solid #e2e8f0;
-    border-radius: 18px;
+    border-radius: var(--radius);
     background: #fff;
     box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
     padding: 0.85rem 1rem;