Componentize dashboard middle section and add Mento brand assets.

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-09-01 16:05:29 +03:30
parent da6c494fcb
commit 57fa6c8d12
15 changed files with 1491 additions and 1015 deletions
@@ -0,0 +1,151 @@
+<script setup lang="ts">
+import { RouterLink } from 'vue-router';
+import UiIcon from '@/components/UiIcon.vue';
+
+defineProps<{
+  askQuery: string;
+}>();
+
+const emit = defineEmits<{
+  'update:askQuery': [value: string];
+  ask: [];
+}>();
+
+const shortcuts = [
+  { label: 'خلاصه مشتری شرکت آریانا را بده', to: '/contacts', icon: 'users' as const },
+  { label: 'متن پیگیری برای مشتری بفرست', to: '/notes', icon: 'send' as const },
+  { label: 'گزارش فروش این هفته را نشان بده', to: '/reports', icon: 'chart' as const },
+  { label: 'معاملات در خطر را لیست کن', to: '/pipeline', icon: 'warning' as const },
+];
+</script>
+
+<template>
+  <article class="panel ai-panel">
+    <header class="panel-head">
+      <h2>
+        <UiIcon name="sparkle" :size="16" />
+        دستیار هوشمند منتو
+      </h2>
+    </header>
+
+    <p class="ai-lead">چه کمکی می‌تونم بکنم؟</p>
+
+    <div class="ai-shortcuts">
+      <RouterLink
+        v-for="item in shortcuts"
+        :key="item.label"
+        class="ai-chip"
+        :to="item.to"
+      >
+        <span class="chip-ico"><UiIcon :name="item.icon" :size="15" /></span>
+        <span>{{ item.label }}</span>
+      </RouterLink>
+    </div>
+
+    <form class="ai-input" @submit.prevent="emit('ask')">
+      <input
+        :value="askQuery"
+        type="search"
+        placeholder="از منتو بپرس..."
+        @input="emit('update:askQuery', ($event.target as HTMLInputElement).value)"
+      />
+      <button type="submit" aria-label="ارسال">
+        <UiIcon name="send" :size="16" />
+      </button>
+    </form>
+  </article>
+</template>
+
+<style scoped>
+.panel {
+  background: #fff;
+  border-radius: 22px;
+  padding: 1.05rem 1.1rem;
+  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
+  border: 1px solid #eef2f7;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.panel-head {
+  margin-bottom: 0.55rem;
+}
+
+h2 {
+  margin: 0;
+  font-size: 0.98rem;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  color: #0f172a;
+}
+
+.ai-lead {
+  margin: 0 0 0.85rem;
+  color: #94a3b8;
+  font-size: 0.88rem;
+}
+
+.ai-shortcuts {
+  display: grid;
+  gap: 0.45rem;
+  margin-bottom: 0.95rem;
+  flex: 1;
+}
+
+.ai-chip {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  padding: 0.7rem 0.8rem;
+  border-radius: 14px;
+  background: #f8fafc;
+  border: 1px solid #eef2f7;
+  color: #334155;
+  font-size: 0.8rem;
+  text-decoration: none;
+  transition: background 0.15s ease, border-color 0.15s ease;
+}
+
+.ai-chip:hover {
+  background: #ecfdf8;
+  border-color: #99f6e4;
+}
+
+.chip-ico {
+  width: 28px;
+  height: 28px;
+  border-radius: 10px;
+  background: #ecfdf8;
+  color: #14b8a6;
+  display: grid;
+  place-items: center;
+  flex-shrink: 0;
+}
+
+.ai-input {
+  display: flex;
+  gap: 0.45rem;
+  margin-top: auto;
+}
+
+.ai-input input {
+  flex: 1;
+  border: 1px solid #e2e8f0;
+  border-radius: 14px;
+  padding: 0.7rem 0.85rem;
+  background: #f8fafc;
+}
+
+.ai-input button {
+  width: 44px;
+  border: 0;
+  border-radius: 14px;
+  background: #14b8a6;
+  color: #fff;
+  cursor: pointer;
+  display: grid;
+  place-items: center;
+}
+</style>