-
-
Notifications
You must be signed in to change notification settings - Fork 159
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
22 changed files
with
1,078 additions
and
303 deletions.
There are no files selected for viewing
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,147 @@ | ||
| import { createApp, defineComponent, ref, h, isVNode, App, watch } from "vue"; | ||
| import { definedScripts } from "."; | ||
| import { getItem } from "../browser.entry"; | ||
| import { createFooter, createNote, createHeaders, createContainers } from "./common/create.element"; | ||
| import { DefineScript } from "./common/define.script"; | ||
| import { dragEnable, getCurrentPanels, addEvent, getCurrentRoutes } from "./common/utils"; | ||
|
|
||
| /** 面板元素 */ | ||
| export let panel: HTMLElement | undefined | null; | ||
| /** vue app 元素 */ | ||
| export let app: App; | ||
|
|
||
| export interface StartOptions { | ||
| /** | ||
| * 面板样式 url | string | ||
| */ | ||
| style?: string; | ||
| /** | ||
| * 是否开启面板拖拽 | ||
| */ | ||
| draggable?: boolean; | ||
| /** 脚本列表 */ | ||
| scripts?: DefineScript[]; | ||
| } | ||
|
|
||
| /** | ||
| * 显示面板，检测是否存在需要运行的脚本，并执行 | ||
| */ | ||
| export function start(options?: StartOptions) { | ||
| showPanels(options); | ||
| executeScripts(options?.scripts); | ||
| } | ||
|
|
||
| /** | ||
| * 显示面板 | ||
| */ | ||
| export function showPanels(options?: StartOptions) { | ||
| const { style = "", draggable, scripts = definedScripts } = options || {}; | ||
|
|
||
| app = createApp(createPanel()); | ||
| panel = document.createElement("ocs-panel"); | ||
| document.body.appendChild(panel); | ||
| app.mount(panel); | ||
|
|
||
| if (draggable) { | ||
| dragEnable(panel); | ||
| } | ||
|
|
||
| function createPanel() { | ||
| return defineComponent({ | ||
| data() { | ||
| const panels = ref(getCurrentPanels(scripts)); | ||
| const activeKey = ref(panels.value[0]?.name); | ||
|
|
||
| history.pushState = addEvent(history, "pushState"); | ||
| history.replaceState = addEvent(history, "replaceState"); | ||
|
|
||
| window.addEventListener("pushState", () => (panels.value = getCurrentPanels(scripts))); | ||
| window.addEventListener("replaceState", () => (panels.value = getCurrentPanels(scripts))); | ||
|
|
||
| watch(panels, () => { | ||
| activeKey.value = panels.value[0]?.name; | ||
| }); | ||
|
|
||
| return { panels, activeKey }; | ||
| }, | ||
| render() { | ||
| const footer = createFooter(); | ||
| const styleElement = | ||
| /** 添加样式 */ | ||
| /[a-zA-z]+:\/\/[^\s]*/.test(style) | ||
| ? h("link", { | ||
| href: style, | ||
| type: "text/css", | ||
| rel: "stylesheet", | ||
| }) | ||
| : h("style", style); | ||
| const about = createNote("进入相应的学习，作业，或者考试页面即可", "此窗口可以使用鼠标拖拽"); | ||
|
|
||
| const main = | ||
| this.panels.length === 0 | ||
| ? [createHeaders(h("div", { class: "title" }, "OCS助手")), createContainers(about), footer] | ||
| : [ | ||
| /** 添加 tab 栏 */ | ||
| createHeaders( | ||
| this.panels.map((panel) => | ||
| h( | ||
| "div", | ||
| { | ||
| class: ["title", this.activeKey === panel.name ? "active" : ""].join(" "), | ||
| onClick: () => { | ||
| // 隐藏其他面板，显示点击的面板 | ||
| this.activeKey = panel.name; | ||
| }, | ||
| }, | ||
| panel.name | ||
| ) | ||
| ) | ||
| ), | ||
|
|
||
| /** 显示面板 */ | ||
| createContainers( | ||
| this.panels.map((panel, i) => { | ||
| const el = panel.el(); | ||
|
|
||
| let element; | ||
| if (isVNode(el)) { | ||
| element = defineComponent({ render: () => el }); | ||
| } else if (typeof el === "string") { | ||
| element = defineComponent({ template: el }); | ||
| } else { | ||
| element = el; | ||
| } | ||
|
|
||
| return h(element, { | ||
| panel: panel.name, | ||
|
|
||
| style: { | ||
| display: this.activeKey === panel.name ? "block" : "none", | ||
| }, | ||
| }); | ||
| }) | ||
| ), | ||
|
|
||
| footer, | ||
| ]; | ||
|
|
||
| return h("div", [styleElement, ...main]); | ||
| }, | ||
| }); | ||
| } | ||
| } | ||
|
|
||
| /** | ||
| * 执行脚本 | ||
| */ | ||
| export function executeScripts(scripts: DefineScript[] = definedScripts) { | ||
| const routes = getCurrentRoutes(scripts); | ||
|
|
||
| for (const route of routes) { | ||
| let setting; | ||
| if (route.settingPath) { | ||
| setting = getItem(route.settingPath); | ||
| } | ||
| route.script(setting); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.