العربية 二. 支助 德国 二. 支助 联合国 二. 支助 西班牙语Name 二. 支助 法国语Name 二. 支助 意大利语 二. 支助 日本語 二. 支助 한국어 二. 支助 荷兰 二. 支助 波尔斯基 二. 支助 葡萄牙语( BR) 二. 支助 Русский 二. 支助 蒂尔克切 二. 支助 简体中文

升级

升级(英語:Escaled)是一个可嵌入式的支持票系统,有SLA跟踪,升级规则,代理工作流程,以及客户门户. 此repo包含每个被支持后端框架中使用的所有共享前端资产(Vue 3 + Inertia.js).

👉 学习更多,查看演示,比较 Cloud 和 Self-Hosted 选项 https://escalated.dev (英语)

你不直接安装这个软件包. 从您框架的后端软件包开始——它处理一切,包括拉出这些前端资产.

特征

• 罚单拆分 ——在保留上下文的同时,将回复分为新的独立票
• 车票打呼噜 - Snooze的票,预设(1h,4h,明天,下周)和自动醒来
• 已保存视图/ 自定义队列 —— 保存、 名称和共享过滤器预设为可重复使用的票面视图
• 可嵌入支持部件 ——入场 <script> 带有 KB 搜索、 票单和状态检查的部件
• 实时更新 ——网球支持(Pusher/Reverb/Soketi)自动倒计时
• 知识库切换 ——启用或禁用管理环境的公共知识库
• CI: ESLint + Pretier 软件 ——每个拉出请求的自动代码样式执行

开始

选择框架 :

每个后端repo都有完整的设置指令——安装命令,迁移,配置,以及前端集成.

将管理员嵌入您自己的管理员面板( 可选)

Escaled带有自己的独立管理员面板,这可以保持默认值. 如果您的应用程序已有管理面板, 您可以选择显示 Escaled 的管理 取而代之的是屏幕:在您的侧边栏和页眉下,您的 URL 前缀和 您的中间软件, 带有 Escaled 的菜单 可以在您的侧边栏中制作 . 除非你打开它,否则一切不变.

三种方法,取决于你的管理人员:

• Vue + Inertia 管理员: Escaled的管理页面使你的体内没有铬 版式 (app.use(EscalatedPlugin, { layout, layoutScope: ['admin'] })),以及 <EscalatedNavigation /> 在边栏列出管理员菜单.
• 服务器管理员 (布莱德,ERB,Django模板,.):您的管理模板 成为嵌入式页面的 Inertia 根视图.
• 还有什么: 包含一个小 postMessage 协议 高度、主题和导航@escalated-dev/escalated/embed) (中文(简体) ).

指南: 前端 • 妇女 拉威尔 • 妇女 铁路 • 妇女 强哥 • 妇女 阿多尼斯·贾克 • 妇女 网点JS • 妇女 共鸣 • 妇女 凤凰 • 妇女 走开 • 妇女 . NET 网络 • 妇女 春节 • 妇女 文字压力。 。 。 . Laravel是参考执行;其他后端正在添加.

尾风 CSS

梯级组件使用Tailwind CSS的公用类(由140+Vue文件组成的~上百个). 一些与 Tailwind相容的类处理器必须在主机应用程序中可用,以便 UI 正确渲染 ——如果没有一个,每个组件都会使DOM成为无名的DOM,其类名不能解决任何CSS.

建议: 现有建筑中的尾风

如果您的主机应用程序已经通过 Vite / PostCSS / Tailwind CLI 使用 Tailwind , 请将此软件包添加到您的 content 装腔作势,不让班级被清洗:

// tailwind.config.js
export default {
    content: [
        // ... your existing paths
        './node_modules/@escalated-dev/escalated/src/**/*.vue',
    ],
}

尾风 4+ 用户 : content glubs是从导入模块中自动发现的——你通常不需要添加任何东西. 跳过这个步骤 如果你在v4.

使用无 Tailwind 构建步骤的 Escaled

如果你不想在建造的管道中装上"泰尔风"工具链,你有一些选择. 每个项目都有取舍——选择最接近项目限制的:

如果这些都不合适,请 开始讨论 这样我们就可以理解这个制约,考虑一个预先编译的CSS分布.

无论你选择哪条路,也要确保 主题符号 (CSS自定义属性)被应用——这些控制颜色,间隔和半径并独立于Tailwind.

他们

Escaled 默认会让内部的布局独立化. 为了融入你的应用软件设计系统 EscalatedPlugin数字 :

import { createApp } from 'vue'
import { EscalatedPlugin } from '@escalated-dev/escalated'
import AppLayout from '@/Layouts/AppLayout.vue'

const app = createApp(...)

app.use(EscalatedPlugin, {
    layout: AppLayout,
    theme: {
        primary: '#3b82f6',
        radius: '0.75rem',
    }
})

布局集成

通过您的应用程序的布局组件和 Escaled 的 客户页 (罚单) 门户和知识库)在其中产生. 管理员和代理人小组 他们自己的导航默认。 布局组件必须接受 #header 位置和默认位置 :

<!-- Your layout must support these slots -->
<template>
    <div>
        <nav>...</nav>
        <header><slot name="header" /></header>
        <main><slot /></main>
    </div>
</template>

在不提供布局时,Escaled使用自己的内置导航栏.

使您的布局中的管理员( 以及可选的代理工作空间) 为 好吧,列出这些章节 layoutScope管理页面,然后不 Escaled 的侧边栏和上边栏, 页面标题在您的 #header 位置 :

app.use(EscalatedPlugin, {
    layout: AdminLayout,
    layoutScope: ['customer', 'admin'], // default: ['customer']
})

这是可选的,只有在设置时才会改变任何东西。 见 将管理员嵌入您的管理员面板。 。 。 .

CSS 自定义属性

这个 theme 选项设置 CSS 自定义属性, 您可以在自己的样式中引用 :

行政和代理小组

theme.panel 显示管理员和代理面板:导航、页眉、标志 平板,连接和表面,以暗或光模式. 两个面板都塌了 在 1024px 下方的菜单按钮后导航。 见 医生/医生 每一个标志.

框架实例

拉威尔 (Inertia + Vue 3): (英语)

import { EscalatedPlugin } from '@escalated-dev/escalated'
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue'

app.use(EscalatedPlugin, { layout: AuthenticatedLayout })

铁路 (Inertia + Vue 3): (英语)

import { EscalatedPlugin } from '@escalated-dev/escalated'
import AppLayout from '@/layouts/AppLayout.vue'

app.use(EscalatedPlugin, { layout: AppLayout })

强哥 (Inertia + Vue 3): (英语)

import { EscalatedPlugin } from '@escalated-dev/escalated'
import BaseLayout from '@/layouts/BaseLayout.vue'

app.use(EscalatedPlugin, { layout: BaseLayout })

阿多尼斯·贾克 (Inertia + Vue 3): (英语)

import { EscalatedPlugin } from '@escalated-dev/escalated'
import AppLayout from '@/layouts/AppLayout.vue'

app.use(EscalatedPlugin, { layout: AppLayout })

这回波里有什么

所有Vue 3 + Inertia.js 组件为 Escaled UI 提供动力. Laravel、Rails、Django和AdonisJS等地都是相同的——后端框架使它们通过Inertia.

QQ 屏幕截图

屏幕截图由Storybook通过 组件截图 工作流程.

行政小组(黑暗)

行政小组(灯光)

代理收件箱

代理面板( 灯光)

车票视图

页 次

客户端门户 ——自助票管理

• pages/Customer/Index.vue ——带有状态过滤和搜索的出票列表
• pages/Customer/Create.vue — 带有文件附件的新票单
• pages/Customer/Show.vue ——带回音线的出票细节

代理设计板 ——出票队列和工作流程

• pages/Agent/Dashboard.vue ——Stats概况和近期票房
• pages/Agent/TicketIndex.vue — 可过滤的票队列
• pages/Agent/TicketShow.vue ——有侧边栏,内部笔记,罐装回音的全票取景

行政小组 ——系统配置

• pages/Admin/Reports.vue - 分析仪表板
• pages/Admin/Departments/ - 部门CRUD
• pages/Admin/SlaPolicies/ - 苏丹解放军政策管理
• pages/Admin/EscalationRules/ - 梯级规则构建器
• pages/Admin/Tags/ - 标签管理
• pages/Admin/CannedResponses/ - 罐装反应模板

共享组件

上面各页使用的可重复使用的构件.

可编曲

插件

插件开发

升级支持框架不可知插件 插件 SDK。插件在 TypeScript 中写过一次,并在所有升级后端工作.

前端插件系统如何工作

前端使用 defineEscalatedPlugin() 以注册 Vue 组件——自定义管理员页面、票面栏部件或仪表板面板——当插件活动时自动挂载.

import { defineEscalatedPlugin } from '@escalated-dev/escalated'
import MySettingsPage from './MySettingsPage.vue'

export default defineEscalatedPlugin({
  name: 'my-plugin',
  pages: {
    'admin/my-plugin/settings': MySettingsPage,
  },
})

它如何连接到后端

后端使用 definePlugin() 从 插件 SDK 用于处理 TypeScript 业务逻辑 – 订阅出票生命周期钩,曝光 API 端点,以及持续的数据. 前端和后端的条目作为单一npm包一起工作.

// backend entry (index.ts)
import { definePlugin } from '@escalated-dev/plugin-sdk'

export default definePlugin({
  name: 'my-plugin',
  version: '1.0.0',
  actions: {
    'ticket.created': async (event, ctx) => {
      ctx.log.info('New ticket!', event)
    },
  },
})

快速示例: 两个条目点

已公布的插件包一般导出两种:

my-plugin/
  index.ts          ← backend: definePlugin() for TypeScript logic
  frontend.ts       ← frontend: defineEscalatedPlugin() for Vue components

后端框架(Laravel, Rails, Django, AdonisJS) 负载 index.ts 通过 插件运行时间。 Vue 应用程序导入 frontend.ts 并登记在 app.use()。 。 。 .

安装插件

npm install @escalated-dev/plugin-slack
npm install @escalated-dev/plugin-jira

资源

• 插件 SDK — 用于构建插件的 SDK 类型
• 插件运行时间 ——插件运行时主机
• 插件开发指南 ——完整文献整理

对于软件包维护者

已验证的来宾访问由后端能力启用. Escalated/Guest/Create 接受可选 verification_url 财务报告和审定财务报表 lookup_url 道具来. 有了这些 URL 表格在发票前请求电子邮件代码; 单独的表格验证 电子邮件,通过跟踪/计票查询和私人续签找到现有车票 链接. Guest/Show 显示 ticket.guest_access_expires_at 当供应.

内置部件只有在 /config 返回时 guest_verification_required: true。后端必须提供 POST /verification 包括电子邮件和目的ticket, (中文(简体) ), chat, (中文(简体) ), lookup),返回时 verification_id· ; 创建接受 verification_id 和八位数 verification_code。 。 。 . 邮政 /lookup 返回时 { data: [{ reference, subject, guest_access_token, expires_at }] }; 后续部件状态已读取, 将符号作为接头符发送 头曰. 聊天创建返回不透明 id 和投票用途 /chat/{id}/messages在目的地清除证据和私人结果,或 身份改变。 托肯斯留在组件记忆中. 仅发送 CSRF 信头 到页面本身的来源.

忽略这些能力的后端保留其现有的形式合同。 主机 必须在这些表格的后端需要核查之前予以装运。 这个可以 不在其他后端软件包中执行校验,也不释放单独的 网络widget插件.

部件也可以嵌入其他站点,作为发射器或页面 支持格式,包含主机参数(部门、预填、元数据)和a JavaScript API (英语). 后端选择使用源列表、 CORS 和 CSRF 豁免这些来源。 见 嵌入部件。 。 。 .

账户隔离的后端可以共享 escalated.broadcasting.channel_prefix 例如,通过Inertia escalated.tenants.<opaque-account-namespace>。 。 。 . 车票、代理、聊天和在场订阅使用此前缀 变化。 保留了现有的 escalated 频道。 独立 PresenceIndicator 消费者可以通过 channelPrefix 道具; useRealtime 财务报告和审定财务报表 useChat 接受 channelPrefix 作为一串, 参考或获取。 原始内容 useRealtime().listen(channel, event, callback) 仍按字面处理频道.

后端必须批准活期账户,每个私人/存在加入. 频道名称本身不是授权. 车票只应曝光 代理身份/播放名称,请求者只能使用私人票 更新。 在启用前部署包含此支持的前端版本 后端的账户范围频道.

如果您正在构建一个新的后端集成, 这个软件包可以在 npm 上提供 :

npm install @escalated-dev/escalated

// Import the plugin
import { EscalatedPlugin } from '@escalated-dev/escalated'

// Import individual components
import { StatusBadge, SlaTimer } from '@escalated-dev/escalated'

// Or reference pages directly for Inertia resolution
import CustomerIndex from '@escalated-dev/escalated/pages/Customer/Index.vue'

同伴依赖性 : vue ^3.3.0, (英语), @inertiajs/vue3 ^ 1.0.0 || 2.0.0 ^ 3.0.0

API 令牌和两要素页面接受来自 page.props.flash (遗产共享道具)和 page.flash (Inertia 3) (英语). 顶级值 优先,包括明确 null 价值可以清除遗留数据。 第3条 后端应该发送一次性的令牌,设置URI,并通过恢复代码 顶级闪存,所以它们被排除在适配器的浏览器历史状态之外. 主机在更改前必须部署包含此支持的前端释放 他们的后端的闪存协议.

捐款

开发工具需要节点 22.22.2+ 22.x线上, (中文(简体) ), 24.1.5.0+ (单位:千美元) 在24号线上,或 26岁以上启用 nvm use 在 .nvmrc。 。 。 . 这些要求适用于此寄存器的工作; 已出版的 Vue 和Inertia同伴的依赖关系列于上文.

npm ci
npm test
npm run lint
npm run format:check
npm run pages:check
npm run build-storybook
npm audit

提交 package-lock.json 包含依赖性更新。 CI 安装精确的图表 与 npm ci,检查依赖性引擎和对等要求,并运行测试 位于22.22.2号、24.15.0号和26号的套房。 故事书的制作和完整 依赖性审计也在合并之前进行.

浏览器合同将当前源头打包, 安装在孤立的 tarball 具有真实的Inertia 1、2、3个适配器的消费者,对每个消费者进行审计和测试 桌面和移动 Chromium 上的指针和双因子流。 它使用本地的 HTTP 服务器和合成证书。 剪贴板边界被模拟到 测试不会更改剪贴板.

npx --no-install playwright install chromium
npm run test:inertia
# Or select a single adapter major:
npm run test:inertia -- 3

将报告和截图写给 test-results/inertia-flash/. CI 运行 每个适配器分别上传成功或失败的证据.

后端设置能力

这个 Escalated/Admin/Settings 页面接受可选 supported_settings 财务报告和审定财务报表 update_url 道具来. 通过可编辑的设置名称数组仅显示并提交 这些字段, 和一个URL 接受一个平面 POST 有效载荷。 空数组显示否 可编辑设置 。 表示这些道具保留了完整的设置形式及其 拉拉维尔命名路线. 后端必须验证自己的设置许可列表; 隐藏 控制不是授权.

例如,后端只执行知识基础和品牌偏好 能够曝光 knowledge_base_enabled, (中文(简体) ), knowledge_base_public, (中文(简体) ), knowledge_base_feedback_enabled,以及 show_powered_by。在 页:1 settings 道具 (英语). 更改设置/ 账号道具清除 stale 格式值 和待处理的请求,包括先前输入的全权证书.

生态系统

这是升级后支持票系统的共享前端. 整个生态系统可用的主机框架软件包和客户端SDK:

• 升级到Laravel ——拉拉维尔作曲机包
• 升级用于铁路 铁路发动机上的Ruby
• 为强哥升职 - Django可重新使用的应用程序
• 阿多尼斯JS升级 - AdonisJS v6 软件包
• 升级为文字新闻 — WordPress 插件
• 升级以备升级 — Filament v3 管理面板插件
• 升级为反应原生 反应原生 SDK
• 为小蝶升起 - 小蝶SDK(小蝶)
• 共享前端 - Vue 3 + Inertia.js UI 组件(您在这里)

许可证

MIT - 版权 (c) Escaled.dev. 见 自由主义。 。 。 .