mirror of
https://github.com/Kuingsmile/PicList.git
synced 2026-05-06 20:42:57 +08:00
✨ Feature(custom): optimze color of scripts action button
This commit is contained in:
Kuingsmile
21
src/renderer/assets/svg/BaseSvg.vue
Normal file
21
src/renderer/assets/svg/BaseSvg.vue
Normal file
@@ -0,0 +1,21 @@
|
||||
<template>
|
||||
<svg :width="size" :height="size" :viewBox="viewBox" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<symbol id="icon-GitHub" viewBox="0 0 24 24">
|
||||
<path
|
||||
d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
|
||||
/>
|
||||
</symbol>
|
||||
</defs>
|
||||
|
||||
<use :href="`#icon-${name}`" />
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
defineProps({
|
||||
name: { type: String, required: true },
|
||||
size: { type: [Number, String], default: 18 },
|
||||
viewBox: { type: String, default: '0 0 24 24' },
|
||||
})
|
||||
</script>
|
||||
@@ -90,7 +90,7 @@
|
||||
<Trash2 :size="14" />
|
||||
</button>
|
||||
<button
|
||||
class="action-btn bg-accent text-white!"
|
||||
class="action-btn bg-accent/50 text-white! hover:bg-accent!"
|
||||
:title="t('pages.scripts.marketplace.shareScript')"
|
||||
@click.stop="openShareDialog(item)"
|
||||
>
|
||||
@@ -98,7 +98,7 @@
|
||||
</button>
|
||||
<button
|
||||
v-if="item.category === 'manualTrigger'"
|
||||
class="action-btn bg-accent/50 text-white!"
|
||||
class="action-btn bg-accent/50 text-white! hover:bg-accent!"
|
||||
:title="t('pages.scripts.runScript')"
|
||||
@click.stop="runScript(item.filePath)"
|
||||
>
|
||||
@@ -109,8 +109,8 @@
|
||||
v-if="item.category !== 'manualTrigger' && item.category !== 'uploader.advancedplist'"
|
||||
class="action-btn border-none"
|
||||
:class="{
|
||||
'bg-success/40': !item.enabled,
|
||||
'bg-error/40': item.enabled,
|
||||
'bg-success/50 hover:bg-success!': !item.enabled,
|
||||
'bg-error/50 hover:bg-error!': item.enabled,
|
||||
}"
|
||||
:title="item.enabled ? t('pages.scripts.disableScript') : t('pages.scripts.enableScript')"
|
||||
@click.stop="toggleScript(item.filePath)"
|
||||
@@ -257,12 +257,7 @@
|
||||
@click="handleGitHubLogin"
|
||||
>
|
||||
<template #icon>
|
||||
<svg width="18" height="18" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<title>GitHub</title>
|
||||
<path
|
||||
d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
|
||||
/>
|
||||
</svg>
|
||||
<BaseSvg name="GitHub" :size="18" color="black" />
|
||||
</template>
|
||||
</CustomButton>
|
||||
</template>
|
||||
@@ -395,12 +390,7 @@
|
||||
>
|
||||
<div class="flex flex-col gap-4 p-6">
|
||||
<div v-if="!githubAuth.isAuthenticated" class="flex flex-col items-center gap-4 py-8">
|
||||
<svg width="48" height="48" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<title>GitHub</title>
|
||||
<path
|
||||
d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
|
||||
/>
|
||||
</svg>
|
||||
<BaseSvg name="GitHub" :size="18" color="black" />
|
||||
<p class="text-center text-sm text-secondary">{{ t('pages.scripts.marketplace.loginRequired') }}</p>
|
||||
<CustomButton
|
||||
type="primary"
|
||||
@@ -409,12 +399,7 @@
|
||||
@click="handleGitHubLogin"
|
||||
>
|
||||
<template #icon>
|
||||
<svg width="18" height="18" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<title>GitHub</title>
|
||||
<path
|
||||
d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
|
||||
/>
|
||||
</svg>
|
||||
<BaseSvg name="GitHub" :size="18" color="black" />
|
||||
</template>
|
||||
</CustomButton>
|
||||
</div>
|
||||
@@ -469,12 +454,7 @@
|
||||
height="auto"
|
||||
>
|
||||
<div class="flex flex-col items-center gap-6 p-6">
|
||||
<svg width="48" height="48" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<title>GitHub</title>
|
||||
<path
|
||||
d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
|
||||
/>
|
||||
</svg>
|
||||
<BaseSvg name="GitHub" :size="18" color="black" />
|
||||
<p class="text-center text-secondary">
|
||||
{{ t('pages.scripts.marketplace.deviceFlowInstructions') }}
|
||||
</p>
|
||||
@@ -549,6 +529,7 @@ import {
|
||||
import { computed, onBeforeMount, onBeforeUnmount, ref, watch } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
import BaseSvg from '@/assets/svg/BaseSvg.vue'
|
||||
import CustomButton from '@/components/common/CustomButton.vue'
|
||||
import CustomInput from '@/components/common/CustomInput.vue'
|
||||
import CustomModal from '@/components/common/CustomModal.vue'
|
||||
@@ -852,7 +833,6 @@ async function fetchMarketplaceScripts() {
|
||||
try {
|
||||
const scripts = await window.electron.triggerRPC<IScriptMeta[]>(IRPCActionType.SCRIPT_MARKETPLACE_FETCH_LIST)
|
||||
marketplaceScripts.value = scripts || []
|
||||
console.log('Fetched marketplace scripts:', marketplaceScripts.value)
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch marketplace scripts:', error)
|
||||
marketplaceError.value = true
|
||||
|
||||
Reference in New Issue
Block a user