DONE: feedback module, use permission name for notification

2026-07-14 12:02:37 +08:00
parent 324b7facf1
commit 52ffd3393a
60 changed files with 3083 additions and 26 deletions
@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { Lucide } from '@/components/ui/lucide'
+import { useRouter } from 'vue-router'
+
+const props = withDefaults(
+  defineProps<{
+    /** Vertical offset from vertical center, in rem (matches Layout side tabs). */
+    offsetRem?: number
+    /** Open feedback form in a new tab instead of navigating in place. */
+    openInNewTab?: boolean
+  }>(),
+  {
+    offsetRem: 3.5,
+    openInNewTab: true,
+  },
+)
+
+const router = useRouter()
+
+function openHelpdesk(event: MouseEvent) {
+  event.preventDefault()
+
+  const { href } = router.resolve({ name: 'feedback-submit' })
+
+  if (props.openInNewTab) {
+    window.open(href, '_blank', 'noopener,noreferrer')
+    return
+  }
+
+  router.push({ name: 'feedback-submit' })
+}
+</script>
+
+<template>
+  <button type="button" aria-label="Helpdesk" :style="{
+    top: `calc(50% + ${offsetRem}rem)`,
+    ['--color' as string]: 'var(--color-primary)',
+  }" :class="[
+    'group fixed right-0 z-50 flex h-12 cursor-pointer items-center overflow-hidden rounded-l-full border border-(--color)/50 bg-background/80 shadow-lg transition-all',
+    'w-14 hover:w-44',
+    'before:absolute before:inset-0 before:bg-(--color)/20',
+  ]" @click="openHelpdesk">
+    <span class="relative z-10 flex items-center gap-2 px-5">
+      <Lucide icon="MessageCircle" />
+      <span :class="[
+        'whitespace-nowrap text-sm',
+        'max-w-0 overflow-hidden transition-[max-width] duration-200 ease-out',
+        'group-hover:max-w-40',
+      ]">
+        Maklum Balas
+      </span>
+    </span>
+  </button>
+</template>