OneBot: Leantime 改造版源码（BOM/Univer 表格/AI 接管/品牌替换等）
This commit is contained in:
wangruiguo
358
app/Domain/Help/Js/tourFactory.js
Normal file
358
app/Domain/Help/Js/tourFactory.js
Normal file
@@ -0,0 +1,358 @@
|
||||
leantime.tourFactory = (function () {
|
||||
|
||||
/**
|
||||
* Create a new tour with default settings
|
||||
* @param {string} tourName - The name of the tour
|
||||
* @returns {Object} - Shepherd tour object
|
||||
*/
|
||||
var createTour = function(tourName) {
|
||||
return new Shepherd.Tour({
|
||||
useModalOverlay: true,
|
||||
defaultStepOptions: {
|
||||
classes: 'shepherd-theme-arrows',
|
||||
scrollTo: false,
|
||||
cancelIcon: {
|
||||
enabled: true
|
||||
}
|
||||
},
|
||||
tourName: tourName
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Register a tour completion
|
||||
* @param {string} tourName - The name of the tour that was completed
|
||||
*/
|
||||
var registerTourCompletion = function(tourName) {
|
||||
leantime.helperRepository.updateUserModalSettings(tourName);
|
||||
|
||||
// Track tour completion for analytics
|
||||
if (typeof _paq !== 'undefined') {
|
||||
_paq.push(['trackEvent', 'Tour', 'Completed', tourName]);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Get tour definitions for a specific tour
|
||||
* @param {string} tourName - The name of the tour
|
||||
* @returns {Array} - Array of tour step definitions
|
||||
*/
|
||||
var getTourDefinition = function(tourName) {
|
||||
const tourDefinitions = {
|
||||
'myWorkDashboard': [
|
||||
{
|
||||
id: "welcome-step",
|
||||
title: "👋 Welcome to the Dashboard Tour",
|
||||
text: "Let's start with a few basics to get you up to speed on the navigation and different elements inside Leantime.",
|
||||
},
|
||||
{
|
||||
id: "top-nav-step",
|
||||
title: "Work Modes",
|
||||
text: "The top navigation shows you the current 'work mode' you're in. You can be inside a project, your personal work area, or in the company mode.",
|
||||
attachTo: { element: '.work-modes', on: 'bottom' }
|
||||
},
|
||||
{
|
||||
id: "menu-step",
|
||||
title: "Left Navigation",
|
||||
text: "The left navigation breaks down the current work mode and gives you access to different areas. Everything presented here is part of the currently selected work mode above.",
|
||||
attachTo: { element: '.leftpanel', on: 'right' }
|
||||
},
|
||||
{
|
||||
id: "my-menu",
|
||||
title: "My Profile Bar",
|
||||
text: "Here you'll find links to your account as well as notifications and latest news about Leantime.",
|
||||
attachTo: { element: '.headmenu.pull-right', on: 'bottom' }
|
||||
},
|
||||
{
|
||||
id: "dashboard-widgets",
|
||||
title: "Your Dashboard Widgets",
|
||||
text: "Your dashboard is broken up into various widgets showing you focused information about your work.",
|
||||
attachTo: { element: '.primaryContent', on: 'top' }
|
||||
},
|
||||
{
|
||||
id: "dashboard-widgets-dandd",
|
||||
title: "Customize Your Dashboard",
|
||||
text: "Widgets can be resized and moved around using the drag and drop functionality.",
|
||||
attachTo: { element: '#widget_wrapper_todos .grid-handler-top', on: 'bottom' }
|
||||
},
|
||||
{
|
||||
id: "my-todo-widget",
|
||||
title: "My To-Dos",
|
||||
text: "The My To-Do widget shows you all the tasks that are currently assigned to you.",
|
||||
attachTo: { element: '#widget_wrapper_todos', on: 'top' }
|
||||
},
|
||||
{
|
||||
id: "my-todo-widget2",
|
||||
title: "Group To-Dos",
|
||||
text: "You can use the dropdowns here to filter your tasks by project or group them by priority, status, project, or dates.",
|
||||
attachTo: { element: '#yourToDoContainer > .clear', on: 'bottom' }
|
||||
},
|
||||
{
|
||||
id: "my-todo-widget4",
|
||||
title: "Sort To-Dos",
|
||||
text: "Each To-Do can be dragged and dropped to change its order. You can also drag and drop a task to the calendar to schedule it.",
|
||||
attachTo: { element: '#yourToDoContainer .sortable-item:first-child', on: 'bottom' }
|
||||
},
|
||||
{
|
||||
id: "my-todo-widget-timer",
|
||||
title: "Start the Timer",
|
||||
text: "When you're ready to start working on a task, just click the start timer button.",
|
||||
attachTo: { element: '#yourToDoContainer .sortable-item:first-child .timerContainer', on: 'bottom' }
|
||||
},
|
||||
{
|
||||
id: "my-todo-widget-complete",
|
||||
title: "Complete a Task",
|
||||
text: "Once a task is complete, you can mark it as done by clicking the status dropdown.",
|
||||
attachTo: { element: '#yourToDoContainer .sortable-item:first-child .statusDropdown', on: 'bottom' }
|
||||
},
|
||||
{
|
||||
id: "my-todo-widget-add",
|
||||
title: "Add More Tasks",
|
||||
text: "You can add more tasks by clicking the plus button in each section, or by using the 3-dot menu next to each task.",
|
||||
attachTo: { element: '#yourToDoContainer .fa-circle-plus', on: 'bottom' }
|
||||
},
|
||||
{
|
||||
id: "finish",
|
||||
title: "Congratulations!",
|
||||
text: "You've completed the My Work dashboard tour. Head to <a href='"+leantime.appUrl+"/dashboard/show'>your project</a> to learn more about project management in Leantime.",
|
||||
},
|
||||
],
|
||||
'projectDashboard': [
|
||||
{
|
||||
id: "left-nav",
|
||||
title: "Project Menu",
|
||||
text: "The project menu organizes your project into different sections: <strong>Data Room</strong> - to host all your files and information, <strong>Think</strong> - to strategize, ideate and define, <strong>Make</strong> - to manage goals, milestones and tasks.",
|
||||
attachTo: { element: '.leftmenu ul', on: 'left' }
|
||||
},
|
||||
{
|
||||
id: 'project-selector',
|
||||
title: "Project Selector",
|
||||
text: "Use the project selector to jump between projects. The left menu shows everything related to your current project.",
|
||||
attachTo: { element: '.bigProjectSelector', on: 'bottom' }
|
||||
},
|
||||
{
|
||||
id: 'project-checklist',
|
||||
title: "Checklist",
|
||||
text: "The project checklist is a quick reference to see if your project contains all the necessary information for successful execution.",
|
||||
attachTo: { element: '#progressForm', on: 'bottom' }
|
||||
},
|
||||
{
|
||||
id: 'project-status',
|
||||
title: "Quick Status Updates",
|
||||
text: "You can use status updates to quickly share the progress of your project with your team using red, yellow and green colors. The status will be visible across the application.",
|
||||
attachTo: { element: '.project-updates', on: 'left' }
|
||||
},
|
||||
{
|
||||
id: 'project-progress',
|
||||
title: "Progress",
|
||||
text: "The project progress indicator shows you how much work you have completed. It accounts for various task sizes, team velocity, and project milestones.",
|
||||
attachTo: { element: '.project-progress', on: 'left' }
|
||||
},
|
||||
{
|
||||
id: 'latest-tasks',
|
||||
title: "Latest Tasks",
|
||||
text: "The list of latest tasks shows you the most recent tasks added to your project and can be used as a project inbox.",
|
||||
attachTo: { element: '.latest-todos', on: 'left' }
|
||||
},
|
||||
{
|
||||
id: 'teams',
|
||||
title: "Team",
|
||||
text: "The team box shows you the members of this project.",
|
||||
attachTo: { element: '.team-container', on: 'top' }
|
||||
},
|
||||
{
|
||||
id: 'finished',
|
||||
title: "Congratulations!",
|
||||
text: "You've completed the project dashboard tour. Head to the <a href='"+leantime.appUrl+"/tickets/showKanban'>To-Dos</a> to learn more about the various ways to manage your tasks in Leantime.",
|
||||
}
|
||||
],
|
||||
'kanbanBoard': [
|
||||
{
|
||||
id: 'kanban-overview',
|
||||
title: "Your Kanban Board",
|
||||
text: "This is your Kanban board. It helps you visualize your work and limit work-in-progress.",
|
||||
attachTo: { element: '.kanban-board-wrapper', on: 'top' }
|
||||
},
|
||||
{
|
||||
id: 'kanban-columns',
|
||||
title: "Work Flow",
|
||||
text: "Tasks move from left to right as they progress. Drag and drop cards to update their status.",
|
||||
attachTo: { element: '.column', on: 'right' }
|
||||
},
|
||||
{
|
||||
id: 'kanban-columns2',
|
||||
title: "Flexible Columns",
|
||||
text: "Using the 3-dot menu, you can add or remove columns and rename them.",
|
||||
attachTo: { element: '.column .widgettitle .inlineDropDownContainer', on: 'right' }
|
||||
},
|
||||
{
|
||||
id: 'kanban-filter',
|
||||
title: "Filter Tasks",
|
||||
text: "You can filter your tasks by various fields like priority, status, project, or dates.",
|
||||
attachTo: { element: '.filterWrapper > .btn', on: 'bottom' }
|
||||
},
|
||||
{
|
||||
id: 'kanban-group',
|
||||
title: "Swimlanes",
|
||||
text: "Additionally, you can group your tasks to create Kanban swimlanes. This helps you visualize your work by team members, priority, or milestones.",
|
||||
attachTo: { element: '.filterWrapper > .btn-group', on: 'bottom' }
|
||||
},
|
||||
{
|
||||
id: 'kanban-sprints',
|
||||
title: "Sprints",
|
||||
text: "If you manage your work in sprints, you can use the dropdown here to select, create, and update sprints.",
|
||||
attachTo: { element: '.pageheader .dropdown', on: 'bottom' }
|
||||
},
|
||||
{
|
||||
id: 'kanban-congrats',
|
||||
title: "Congratulations!",
|
||||
text: "This concludes the Kanban tour. Head to the <a href='"+leantime.appUrl+"/tickets/showKanban'>Milestones</a> to learn how to create and manage milestones in Leantime.",
|
||||
}
|
||||
],
|
||||
'milestoneView': [
|
||||
{
|
||||
id: 'milestone-overview',
|
||||
title: "Milestones",
|
||||
text: "Milestones help you track major outcomes and project phases.",
|
||||
attachTo: { element: '.gantt-wrapper', on: 'top' }
|
||||
},
|
||||
{
|
||||
id: 'milestone-drag',
|
||||
title: "Drag & Sort",
|
||||
text: "Each bar represents one milestone. You can drag them along the timeline, reorder, and resize them. Everything you do on this screen updates the timing of your milestones.",
|
||||
attachTo: { element: '.gantt-wrapper', on: 'top' }
|
||||
},
|
||||
{
|
||||
id: 'milestone-filter',
|
||||
title: "Filter",
|
||||
text: "You can filter your milestones and also view tasks that are part of them.",
|
||||
attachTo: { element: '.filterWrapper > .btn', on: 'bottom' }
|
||||
},
|
||||
{
|
||||
id: 'milestone-timeframes',
|
||||
title: "Timeframes",
|
||||
text: "You can change the timeframe of the timeline view to see more of the year or dive deep into a daily breakdown.",
|
||||
attachTo: { element: '.col-md-4 .pull-right', on: 'bottom' }
|
||||
},
|
||||
{
|
||||
id: 'milestone-congrats',
|
||||
title: "Congratulations!",
|
||||
text: "This concludes the milestone tour. Head to the <a href='"+leantime.appUrl+"/goalcanvas/dashboard'>Goals</a> to learn how to create and manage goals in Leantime.",
|
||||
},
|
||||
],
|
||||
'goalsView': [
|
||||
{
|
||||
id: 'goals-overview',
|
||||
title: "Goals",
|
||||
text: "Goals help you track measurable impact on your projects.",
|
||||
},
|
||||
{
|
||||
id: 'goal-parts',
|
||||
title: "Objectives & Metrics",
|
||||
text: "Each goal is made up of an Objective (what you're trying to accomplish) and a Metric (how you'll measure it).",
|
||||
attachTo: { element: '.ticketBox', on: 'top' }
|
||||
},
|
||||
{
|
||||
id: 'goal-progress',
|
||||
title: "Goal Progress",
|
||||
text: "As you update your goal metrics, the progress bar will show you how far along you are.",
|
||||
attachTo: { element: '.ticketBox > .row > .col-md-12 .progress', on: 'bottom' }
|
||||
},
|
||||
{
|
||||
id: 'milestone-connection',
|
||||
title: "Milestones & Goals",
|
||||
text: "You can connect goals to milestones to track the task-level progress of your goals. This helps identify gaps in your project plan.",
|
||||
attachTo: { element: '.ticketBox.fixed', on: 'bottom' }
|
||||
},
|
||||
{
|
||||
id: 'milestone-congrats',
|
||||
title: "Congratulations!",
|
||||
text: "This concludes the goals tour. Milestones, Goals, and To-Dos are the basic building blocks in Leantime. Use them to break down your work into manageable chunks. Head to the <a href='"+leantime.appUrl+"/tickets/showKanban'>Kanban Board</a> to review your tasks.",
|
||||
},
|
||||
]
|
||||
};
|
||||
|
||||
return tourDefinitions[tourName] || [];
|
||||
};
|
||||
|
||||
/**
|
||||
* Build a tour from a definition
|
||||
* @param {string} tourName - The name of the tour to build
|
||||
* @returns {Object} - Configured Shepherd tour object
|
||||
*/
|
||||
var buildTour = function(tourName) {
|
||||
const tour = createTour(tourName);
|
||||
const steps = getTourDefinition(tourName);
|
||||
|
||||
steps.forEach((step, index) => {
|
||||
const isFirst = index === 0;
|
||||
const isLast = index === steps.length - 1;
|
||||
|
||||
// Configure buttons based on position in tour
|
||||
const buttons = [];
|
||||
|
||||
if (!isFirst) {
|
||||
buttons.push({
|
||||
text: leantime.i18n.__("tour.back"),
|
||||
classes: 'shepherd-button-secondary',
|
||||
action: tour.back
|
||||
});
|
||||
}
|
||||
|
||||
if (isLast) {
|
||||
buttons.push({
|
||||
text: leantime.i18n.__("tour.finish"),
|
||||
action: function() {
|
||||
registerTourCompletion(tourName);
|
||||
confetti();
|
||||
tour.complete();
|
||||
}
|
||||
});
|
||||
} else {
|
||||
buttons.push({
|
||||
text: leantime.i18n.__("tour.next"),
|
||||
action: tour.next
|
||||
});
|
||||
}
|
||||
|
||||
// Add cancel button for all steps
|
||||
if (!isLast) {
|
||||
buttons.unshift({
|
||||
text: leantime.i18n.__("tour.cancel"),
|
||||
classes: 'shepherd-button-secondary',
|
||||
action: tour.cancel
|
||||
});
|
||||
}
|
||||
|
||||
// Add the step to the tour
|
||||
tour.addStep({
|
||||
...step,
|
||||
buttons: buttons
|
||||
});
|
||||
});
|
||||
|
||||
// Add event handlers
|
||||
tour.on('complete', function() {
|
||||
registerTourCompletion(tourName);
|
||||
});
|
||||
|
||||
return tour;
|
||||
};
|
||||
|
||||
/**
|
||||
* Start a specific tour
|
||||
* @param {string} tourName - The name of the tour to start
|
||||
*/
|
||||
var startTour = function(tourName) {
|
||||
const tour = buildTour(tourName);
|
||||
tour.start();
|
||||
return tour;
|
||||
};
|
||||
|
||||
return {
|
||||
createTour: createTour,
|
||||
buildTour: buildTour,
|
||||
startTour: startTour,
|
||||
getTourDefinition: getTourDefinition
|
||||
};
|
||||
})();
|
||||
Reference in New Issue
Block a user