feat(plugin): 添加插件市场设置窗口

该提交添加了一个新的组件PluginMarketSettingDialog.vue,用于插件市场的设置窗口。该窗口可以通过点击插件市场设置图标打开,并提供了保存设置的功能。

该提交还在PluginCardListView.vue中引入了PluginMarketSettingDialog组件,并在点击插件市场设置图标时打开该窗口。

该提交的目的是为了提供一个方便的界面,让用户可以设置插件市场的仓库地址。
This commit is contained in:
jxxghp
2024-11-04 11:27:43 +08:00
parent 812dd1f184
commit bb67a051c2
3 changed files with 107 additions and 16 deletions

View File

@@ -9,6 +9,7 @@ import noImage from '@images/logos/plugin.png'
import { useDisplay } from 'vuetify'
import { isNullOrEmptyObject } from '@/@core/utils'
import { PluginTabs } from '@/router/menu'
import PluginMarketSettingDialog from '@/components/dialog/PluginMarketSettingDialog.vue'
const route = useRoute()
@@ -63,6 +64,9 @@ const PluginStatistics = ref<{ [key: string]: number }>({})
// 搜索窗口
const SearchDialog = ref(false)
// 插件市场设置窗口
const MarketSettingDialog = ref(false)
// 搜索关键字
const keyword = ref('')
@@ -311,6 +315,13 @@ function pluginInstalled() {
refreshData()
}
// 插件市场设置完成
function marketSettingDone() {
MarketSettingDialog.value = false
// 重新加载数据
refreshData()
}
// 处理掉github地址的前缀
function handleRepoUrl(url: string | undefined) {
if (!url) return ''
@@ -435,19 +446,40 @@ onBeforeMount(async () => {
</VWindow>
</div>
<!-- 插件搜索 -->
<!-- 插件搜索图标 -->
<VFab
icon="mdi-magnify"
color="info"
location="bottom"
class="mb-2"
size="x-large"
fixed
app
appear
@click="SearchDialog = true"
:class="appMode ? 'mb-28' : 'mb-16'"
/>
<!-- 插件市场设置图标 -->
<VFab
icon="mdi-store-cog"
color="warning"
location="bottom"
size="x-large"
fixed
app
appear
@click="MarketSettingDialog = true"
:class="{ 'mb-12': appMode }"
/>
<!-- 插件市场设置窗口 -->
<PluginMarketSettingDialog
v-if="MarketSettingDialog"
v-model="MarketSettingDialog"
@close="MarketSettingDialog = false"
@save="marketSettingDone"
/>
<!-- 插件搜索窗口 -->
<VDialog
v-if="SearchDialog"
v-model="SearchDialog"