diff --git a/components.d.ts b/components.d.ts index c86c669..7e07740 100644 --- a/components.d.ts +++ b/components.d.ts @@ -23,8 +23,6 @@ declare module 'vue' { ElSkeleton: typeof import('element-plus/es')['ElSkeleton'] ElSkeletonItem: typeof import('element-plus/es')['ElSkeletonItem'] ElSwitch: typeof import('element-plus/es')['ElSwitch'] - ElTabPane: typeof import('element-plus/es')['ElTabPane'] - ElTabs: typeof import('element-plus/es')['ElTabs'] ElTag: typeof import('element-plus/es')['ElTag'] } } diff --git a/entrypoints/sidepanel/Sidepanel.vue b/entrypoints/sidepanel/Sidepanel.vue index 320d350..1cb32ae 100644 --- a/entrypoints/sidepanel/Sidepanel.vue +++ b/entrypoints/sidepanel/Sidepanel.vue @@ -10,7 +10,7 @@ import { formattime } from '@/utils/formattime'; import * as utils from '@/utils/utils'; import constant from '@/utils/constant'; import { copyMd } from '@/utils/copyMd'; -// @ts-ignore +import '@imengyu/vue3-context-menu/lib/vue3-context-menu.css'; import json from '../../package.json'; import { debounce } from '@/utils/debounce'; import * as WI from '@/utils/icons'; @@ -31,17 +31,20 @@ import { } from '@/utils/storage'; import { useContent } from '@/hooks/useContent'; +// @ts-expect-error +import ContextMenu from '@imengyu/vue3-context-menu'; + const isHome = ref(true); const isRead = ref(true); const { loading, html, md, link, faviconUrl, title, getContent } = useContent(); const { isDarkMode, toggleDark } = useDarkMode(); +const mousePosition = ref(); const isOnline = ref(false); const ports = [8000, 8080, 8001, 8081]; // const devMode = import.meta.env.DEV; const editRef = ref(); const isChecking = ref(false); -const currentTab = ref('preview'); const isCheckTw5 = ref(false); // 是否连接tw const inputVisible = ref(false); const InputRef = ref(); @@ -65,6 +68,78 @@ const auth = await authStorage.getValue(); username.value = auth.username; password.value = auth.password; +function onContextMenu(e: MouseEvent) { + e.preventDefault(); + //show our menu + ContextMenu.showContextMenu({ + x: e.x, + y: e.y, + theme: isDarkMode.value ? 'dark' : 'light', + // onClickOnOutside: () => { + // notify('关闭'); + // }, + clickCloseOnOutside: true, // 点击关闭右键菜单 + items: [ + { + label: '保存', + onClick: handleSave, + icon: h(WI.FaRegularSave), + divided: true, + }, + { + label: '刷新', + onClick: actions.refresh, + icon: h(WI.MdiCloudRefreshVariant), + }, + { + label: '复制', + onClick: actions.copy, + icon: h(WI.MdiContentCopy), + }, + { + label: '日记', + onClick: actions.journal, + icon: h(WI.PhPencil), + }, + { + label: '切换', + onClick: actions.darkmode, + icon: h(WI.FluentDarkTheme24Filled), + }, + { + label: '更多', + icon: h(WI.CharmMenuMeatball), + children: [ + { + label: '配置', + onClick: actions.setup, + icon: h(WI.TdesignSetting), + }, + { + label: '编辑', + onClick: actions.edit, + icon: h(WI.CharmBookOpen), + }, + { + label: '详情', + onClick: actions.info, + icon: h(WI.MaterialSymbolsInfoOutline), + }, + { + label: '太微', + onClick: actions.tiddlywiki, + icon: h(WI.SimpleIconsTiddlywiki), + }, + ], + }, + // { + // label: 'A submenu', + // children: [{ label: 'Item1' }, { label: 'Item2' }, { label: 'Item3' }], + // }, + ], + }); +} + // devmode if (isDev) { port.value = constant.devPort; @@ -121,8 +196,8 @@ function addJournal() { isCheckTw5.value = true; title.value = formattime(new Date(), 'YYYY/MM/DD') + `-${utils.randomChar()}`; dynamicTags.value = ['Journal']; - currentTab.value = 'edit'; link.value = `#${title.value}`; + isRead.value = false; nextTick(() => { if (editRef.value) editRef.value.focus(); @@ -254,26 +329,30 @@ async function saveAuth(option: { username: string; password: string }) { } } +const actions: Record = { + tiddlywiki: () => { + isHome.value = !isHome.value; + }, + journal: addJournal, + info: () => { + infoDialogStatus.value = !infoDialogStatus.value; + }, + setup: () => { + setupDialogStatus.value = true; + }, + copy: () => copyMd(md.value), + download: () => saveMarkdown(md.value, title.value!), + refresh: () => getContent({ tip: true }), + darkmode: () => toggleDark(mousePosition.value), + edit: () => { + isRead.value = !isRead.value; + }, +}; + const handleCommand = async (cmd: ICommand, components: any, e: MouseEvent) => { - const actions: Record = { - tiddlywiki: () => { - isHome.value = !isHome.value; - }, - journal: addJournal, - info: () => { - infoDialogStatus.value = !infoDialogStatus.value; - }, - setup: () => { - setupDialogStatus.value = true; - }, - copy: () => copyMd(md.value), - download: () => saveMarkdown(md.value, title.value!), - refresh: () => getContent({ tip: true }), - darkmode: () => toggleDark(e), - edit: () => { - isRead.value = !isRead.value; - }, - }; + if (e) { + mousePosition.value = e; + } actions[cmd](e); }; @@ -317,7 +396,8 @@ const handleCommand = async (cmd: ICommand, components: any, e: MouseEvent) => {
+ v-if="isHome" + @contextmenu="onContextMenu">
{ diff --git a/package.json b/package.json index 3ac2309..32996aa 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "usewiki2", "description": "Convert HTML to Markdown, and save to your computer, support nodejs tiddlywiki", "private": true, - "version": "4.8.4", + "version": "4.9.0", "type": "module", "scripts": { "dev": "wxt --mode development", @@ -15,6 +15,7 @@ "postinstall": "wxt prepare" }, "dependencies": { + "@imengyu/vue3-context-menu": "^1.4.1", "@mozilla/readability": "^0.5.0", "@tailwindcss/typography": "^0.5.13", "dayjs": "^1.11.12", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index dcf7e87..6017eb1 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -8,6 +8,9 @@ importers: .: dependencies: + '@imengyu/vue3-context-menu': + specifier: ^1.4.1 + version: 1.4.1 '@mozilla/readability': specifier: ^0.5.0 version: 0.5.0 @@ -757,6 +760,9 @@ packages: '@iconify/utils@2.1.25': resolution: {integrity: sha512-Y+iGko8uv/Fz5bQLLJyNSZGOdMW0G7cnlEX1CiNcKsRXX9cq/y/vwxrIAtLCZhKHr3m0VJmsjVPsvnM4uX8YLg==} + '@imengyu/vue3-context-menu@1.4.1': + resolution: {integrity: sha512-34WInBVx0Mr0zSsRCQWG7ezHk0JzOuZqE4T8ywI82mbk/jfWBRtTkKHYSZbtmw2oYEfDFwCWdM/gur7QFAXYMA==} + '@isaacs/cliui@8.0.2': resolution: {integrity: sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==} engines: {node: '>=12'} @@ -4030,6 +4036,8 @@ snapshots: transitivePeerDependencies: - supports-color + '@imengyu/vue3-context-menu@1.4.1': {} + '@isaacs/cliui@8.0.2': dependencies: string-width: 5.1.2 diff --git a/utils/icons/index.ts b/utils/icons/index.ts index 51dbc4c..081ad49 100644 --- a/utils/icons/index.ts +++ b/utils/icons/index.ts @@ -11,6 +11,7 @@ export { default as CharmBookOpen } from '~icons/charm/book-open'; export { default as FaRegularEdit } from '~icons/fa-regular/edit'; export { default as TdesignSetting } from '~icons/tdesign/setting'; export { default as FaFileTextO } from '~icons/fa/file-text-o'; +export { default as CharmMenuMeatball } from '~icons/charm/menu-meatball'; // tools export { default as MaterialSymbolsDownload } from '~icons/material-symbols/download';