feat(web): add stage path strip with Didar-style move confirm

Let users jump stages from activity detail and deal form only after confirming انجام بده / انجام نده. Co-authored-by: Cursor <cursoragent@cursor.com>
2026-11-11 13:55:43 +03:30
parent 871d7bba1a
commit d7cb92bf81
3 changed files with 212 additions and 1 deletions
@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { Button as AButton, Flex as AFlex, theme } from 'ant-design-vue';
+import { LeftOutlined } from '@ant-design/icons-vue';
+
+export type StagePathItem = {
+  id: string;
+  name: string;
+};
+
+const props = withDefaults(
+  defineProps<{
+    stages: StagePathItem[];
+    value?: string | null;
+    loading?: boolean;
+    disabled?: boolean;
+    ariaLabel?: string;
+  }>(),
+  {
+    value: null,
+    loading: false,
+    disabled: false,
+    ariaLabel: 'مراحل',
+  },
+);
+
+const emit = defineEmits<{
+  'update:value': [id: string];
+  select: [id: string];
+}>();
+
+const { token } = theme.useToken();
+
+const currentIndex = computed(() =>
+  props.stages.findIndex((stage) => stage.id === props.value),
+);
+
+const stripStyle = computed(() => ({
+  width: '100%',
+  overflowX: 'auto' as const,
+  paddingBottom: '2px',
+}));
+
+const sepStyle = computed(() => ({
+  color: token.value.colorTextQuaternary,
+  fontSize: '10px',
+  flexShrink: 0,
+}));
+
+function onPick(id: string) {
+  if (props.disabled || props.loading || id === props.value) return;
+  emit('update:value', id);
+  emit('select', id);
+}
+</script>
+
+<template>
+  <div
+    role="listbox"
+    :aria-label="ariaLabel"
+    :aria-busy="loading || undefined"
+    :style="stripStyle"
+  >
+    <a-flex align="center" :gap="6" :wrap="false" :style="{ width: 'max-content', minWidth: '100%' }">
+      <template v-for="(stage, index) in stages" :key="stage.id">
+        <LeftOutlined v-if="index > 0" :style="sepStyle" aria-hidden="true" />
+        <a-button
+          role="option"
+          :aria-selected="stage.id === value"
+          :type="stage.id === value ? 'primary' : 'default'"
+          :disabled="disabled || loading"
+          :style="{
+            borderRadius: '999px',
+            flexShrink: 0,
+            fontWeight: stage.id === value || index <= currentIndex ? 600 : 500,
+            opacity: index < currentIndex ? 0.85 : 1,
+          }"
+          @click="onPick(stage.id)"
+        >
+          {{ stage.name }}
+        </a-button>
+      </template>
+    </a-flex>
+  </div>
+</template>