GithubBackup/PicList
1
0
Fork 0
mirror of https://github.com/Kuingsmile/PicList.git synced 2026-07-22 21:27:00 +08:00
Code Issues Packages Projects Releases Wiki Activity

🐛 Fix(custom): fix an issue eslint not worked as expected

Browse Source
This commit is contained in:
Kuingsmile
2025-12-30 13:20:28 +08:00
parent 4fb5a26270
commit b53eccce13
185 changed files with 8014 additions and 7627 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/renderer/App.vue
View File

@@ -40,7 +40,7 @@ onMounted(async () => {
<script lang="ts">
export default {
name: 'PicGoApp'
name: 'PicGoApp',
}
</script>

25
src/renderer/components/ImageLocal.vue
View File

@@ -63,36 +63,36 @@ onBeforeMount(async () => {
<style scoped>
.image-container {
height: 100px;
width: 100%;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
position: relative;
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
width: 100%;
height: 100px;
}
.image {
max-height: 100%;
max-width: 100%;
object-fit: contain;
display: block;
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.loading-placeholder {
display: flex;
align-items: center;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
.loading-spinner {
width: 24px;
height: 24px;
border: 2px solid #e4e7ed;
border-top: 2px solid #409eff;
border-radius: 50%;
width: 24px;
height: 24px;
animation: spin 1s linear infinite;
}
@@ -100,6 +100,7 @@ onBeforeMount(async () => {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}

27
src/renderer/components/ImagePreSign.vue
View File

@@ -52,7 +52,7 @@ async function getUrl() {
preSignedUrl.value = await window.electron.triggerRPC<any>(
IRPCActionType.MANAGE_GET_PRE_SIGNED_URL,
props.alias,
props.config
props.config,
)
isLoading.value = false
} catch (error) {
@@ -79,36 +79,36 @@ onMounted(getUrl)
<style scoped>
.image-container {
height: 100px;
width: 100%;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
position: relative;
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
width: 100%;
height: 100px;
}
.image {
max-height: 100%;
max-width: 100%;
object-fit: contain;
display: block;
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.loading-placeholder {
display: flex;
align-items: center;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
.loading-spinner {
width: 24px;
height: 24px;
border: 2px solid #e4e7ed;
border-top: 2px solid #409eff;
border-radius: 50%;
width: 24px;
height: 24px;
animation: spin 1s linear infinite;
}
@@ -116,6 +116,7 @@ onMounted(getUrl)
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}

235
src/renderer/components/ImageProcessSetting.vue
View File

@@ -218,7 +218,7 @@
input-type="radio"
:radio-options="[
{ value: 'text', label: $t('pages.imageProcess.watermark.text') },
{ value: 'image', label: $t('pages.imageProcess.watermark.image') }
{ value: 'image', label: $t('pages.imageProcess.watermark.image') },
]"
@map-change="
(picbedType, value) => safeSetMapValue(waterMarkForm, 'watermarkType', picbedType, value, 'text')
@@ -455,7 +455,7 @@
:select-options="
Array.from(waterMarkPositionMap.entries()).map(([key, label]) => ({
value: key,
label
label,
}))
"
@map-change="
@@ -718,18 +718,18 @@ const tabs = computed(() => [
{
id: 'general',
label: t('pages.imageProcess.generalSettings'),
icon: Settings
icon: Settings,
},
{
id: 'watermark',
label: t('pages.imageProcess.watermarkSettings'),
icon: Image
icon: Image,
},
{
id: 'transform',
label: t('pages.imageProcess.transformSettings'),
icon: RotateCw
}
icon: RotateCw,
},
])
const waterMarkPositionMap = new Map([
@@ -741,7 +741,7 @@ const waterMarkPositionMap = new Map([
['northwest', t('pages.imageProcess.watermark.positionOptions.topLeft')],
['west', t('pages.imageProcess.watermark.positionOptions.left')],
['east', t('pages.imageProcess.watermark.positionOptions.right')],
['centre', t('pages.imageProcess.watermark.positionOptions.center')]
['centre', t('pages.imageProcess.watermark.positionOptions.center')],
])
const imageExtList = ['jpg', 'jpeg', 'png', 'webp', 'bmp', 'tiff', 'tif', 'svg', 'ico', 'avif', 'heif', 'heic']
@@ -766,7 +766,7 @@ const availableFormat = [
'tiff',
'tif',
'v',
'webp'
'webp',
]
const waterMarkForm = reactive<IBuildInWaterMarkOptions>({
@@ -791,7 +791,7 @@ const waterMarkForm = reactive<IBuildInWaterMarkOptions>({
watermarkPosition: 'southeast',
watermarkPositionMap: {},
watermarkImageOpacity: 255,
watermarkImageOpacityMap: {}
watermarkImageOpacityMap: {},
})
const compressForm = reactive<IBuildInCompressOptions>({
@@ -824,12 +824,12 @@ const compressForm = reactive<IBuildInCompressOptions>({
isFlop: false,
isFlopMap: {},
formatConvertObj: {},
formatConvertObjMap: {}
formatConvertObjMap: {},
})
const formatConvertObj = ref('{}')
const skipProcessForm = reactive({
skipProcessExtList: 'zip,rar,7z,tar,gz,tar.gz,tar.bz2,tar.xz'
skipProcessExtList: 'zip,rar,7z,tar,gz,tar.gz,tar.bz2,tar.xz',
})
// State for showing map settings for each field (now unused - kept for future reference)
@@ -851,7 +851,7 @@ function handleSaveConfig() {
let iformatConvertObj = {}
try {
iformatConvertObj = JSON.parse(formatConvertObj.value)
} catch (error) {}
} catch (_error) {}
const formatConvertObjEntries = Object.entries(iformatConvertObj)
const formatConvertObjEntriesFilter = formatConvertObjEntries.filter((item: any) => {
return imageExtList.includes(item[0]) && availableFormat.includes(item[1])
@@ -872,7 +872,7 @@ function handleSaveConfig() {
if (Object.keys(filteredObj).length > 0) {
processedFormatConvertObjMap[picbedType] = filteredObj
}
} catch (error) {
} catch (_error) {
// Skip invalid JSON strings
}
})
@@ -898,7 +898,7 @@ async function initData() {
} else {
formatConvertObj.value = compress.formatConvertObj ?? '{}'
}
} catch (error) {
} catch (_error) {
formatConvertObj.value = '{}'
}
}
@@ -946,11 +946,11 @@ onBeforeMount(async () => {
<style scoped>
.image-process-settings {
overflow-y: auto;
padding: 1.5rem;
min-height: 100vh;
background: var(--color-surface);
color: var(--color-text-primary);
overflow-y: auto;
background: var(--color-surface);
}
/* Header */
@@ -958,12 +958,12 @@ onBeforeMount(async () => {
display: flex;
justify-content: space-between;
align-items: center;
background: var(--color-surface);
margin-bottom: 1.5rem;
border: 1px solid var(--color-border);
border-radius: 12px;
padding: 1.5rem;
margin-bottom: 1.5rem;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
border: 1px solid var(--color-border);
background: var(--color-surface);
box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
}
.header-content {
@@ -985,8 +985,8 @@ onBeforeMount(async () => {
.settings-header p {
margin: 0;
color: var(--color-text-secondary);
font-size: 0.875rem;
color: var(--color-text-secondary);
}
.header-actions {
@@ -997,29 +997,29 @@ onBeforeMount(async () => {
/* Tab Navigation */
.tab-navigation {
display: flex;
background: var(--color-background-primary);
margin-bottom: 1.5rem;
border: 1px solid var(--color-border);
border-radius: 12px;
padding: 0.25rem;
margin-bottom: 1.5rem;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
border: 1px solid var(--color-border);
background: var(--color-background-primary);
box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
}
.tab-button {
display: flex;
justify-content: center;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1rem;
background: transparent;
border: none;
border-radius: 8px;
color: var(--color-text-secondary);
padding: 0.75rem 1rem;
font-size: 0.875rem;
font-weight: 500;
cursor: pointer;
color: var(--color-text-secondary);
background: transparent;
transition: all 0.2s ease;
gap: 0.5rem;
cursor: pointer;
flex: 1;
justify-content: center;
}
.tab-button:hover {
@@ -1028,9 +1028,9 @@ onBeforeMount(async () => {
}
.tab-button.active {
background: #409eff;
color: white;
box-shadow: 0 2px 4px rgba(64, 158, 255, 0.3);
background: #409eff;
box-shadow: 0 2px 4px rgb(64 158 255 / 30%);
}
/* Settings Content */
@@ -1046,24 +1046,24 @@ onBeforeMount(async () => {
}
.settings-section {
background: var(--color-background-primary);
border: 1px solid var(--color-border);
border-radius: 12px;
padding: 1.5rem;
background: var(--color-background-primary);
box-shadow: 0 2px 8px var(--color-border);
border: 1px solid var(--color-border);
}
.settings-section h2 {
margin: 0 0 0.5rem 0;
margin: 0 0 0.5rem;
font-size: 1.125rem;
font-weight: 600;
color: var(--color-text-primary);
}
.settings-section p {
margin: 0 0 1.5rem 0;
color: var(--color-text-secondary);
margin: 0 0 1.5rem;
font-size: 0.875rem;
color: var(--color-text-secondary);
}
/* Form Elements */
@@ -1075,7 +1075,7 @@ onBeforeMount(async () => {
margin-bottom: 0;
}
.form-group > label:not(.switch-label):not(.radio-option) {
.form-group > label:not(.switch-label, .radio-option) {
display: block;
margin-bottom: 0.5rem;
font-size: 0.875rem;
@@ -1085,89 +1085,87 @@ onBeforeMount(async () => {
.form-input,
.form-textarea {
width: 100%;
padding: 0.75rem;
border: 1px solid var(--color-border);
border-radius: 8px;
background: var(--color-background-primary);
color: var(--color-text-primary);
padding: 0.75rem;
width: 100%;
font-size: 0.875rem;
color: var(--color-text-primary);
background: var(--color-background-primary);
transition: all 0.2s ease;
box-sizing: border-box;
}
.form-input:focus,
.form-textarea:focus {
outline: none;
border-color: var(--color-blue-common);
box-shadow: 0 0 0 2px var(--el-color-primary-light-9, rgba(64, 158, 255, 0.2));
outline: none;
box-shadow: 0 0 0 2px var(--el-color-primary-light-9, rgb(64 158 255 / 20%));
}
.form-textarea {
resize: vertical;
min-height: 80px;
resize: vertical;
}
.form-range {
margin-bottom: 0.5rem;
border-radius: 3px;
width: 100%;
height: 6px;
border-radius: 3px;
background: #e4e7ed;
outline: none;
margin-bottom: 0.5rem;
-webkit-appearance: none;
appearance: none;
}
.form-range::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
border: 2px solid #ffffff;
border-radius: 50%;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--color-blue-common);
box-shadow: 0 2px 4px rgb(0 0 0 / 20%);
appearance: none;
cursor: pointer;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
border: 2px solid #ffffff;
}
.form-range::-moz-range-thumb {
border: 2px solid #ffffff;
border-radius: 50%;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--color-blue-common);
box-shadow: 0 2px 4px rgb(0 0 0 / 20%);
cursor: pointer;
border: 2px solid #ffffff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.range-value {
display: inline-block;
padding: 0.25rem 0.5rem;
background: var(--color-blue-common);
color: white;
margin-bottom: 0.5rem;
border-radius: 4px;
padding: 0.25rem 0.5rem;
min-width: 3rem;
font-size: 0.75rem;
font-weight: 500;
margin-bottom: 0.5rem;
min-width: 3rem;
text-align: center;
color: white;
background: var(--color-blue-common);
}
.form-color {
width: 60px;
height: 40px;
border: 1px solid var(--color-border);
border-radius: 6px;
padding: 0;
width: 60px;
height: 40px;
background: transparent;
cursor: pointer;
padding: 0;
}
.form-color:focus {
outline: none;
border-color: var(--color-blue-common);
box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
outline: none;
box-shadow: 0 0 0 2px rgb(64 158 255 / 20%);
}
.color-input-group {
@@ -1191,13 +1189,13 @@ onBeforeMount(async () => {
.switch-label {
display: flex;
align-items: center;
gap: 1rem;
cursor: pointer;
padding: 1rem;
border: 1px solid var(--color-border);
border-radius: 8px;
transition: all 0.2s ease;
padding: 1rem;
background: var(--color-background-primary);
transition: all 0.2s ease;
gap: 1rem;
cursor: pointer;
}
.switch-label:hover {
@@ -1211,25 +1209,25 @@ onBeforeMount(async () => {
.switch-slider {
position: relative;
border-radius: 12px;
width: 44px;
height: 24px;
background: var(--color-border-darker);
border-radius: 12px;
transition: all 0.3s ease;
flex-shrink: 0;
}
.switch-slider::before {
content: '';
position: absolute;
top: 2px;
left: 2px;
border-radius: 50%;
width: 20px;
height: 20px;
background: #ffffff;
border-radius: 50%;
box-shadow: 0 2px 4px rgb(0 0 0 / 20%);
transition: all 0.3s ease;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
content: '';
}
.switch-input:checked + .switch-slider {
@@ -1270,18 +1268,18 @@ onBeforeMount(async () => {
.radio-option {
display: flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
padding: 0.5rem 0.75rem;
border: 1px solid var(--color-border);
border-radius: 6px;
transition: all 0.2s ease;
padding: 0.5rem 0.75rem;
background: var(--color-background-primary);
transition: all 0.2s ease;
gap: 0.5rem;
cursor: pointer;
}
.radio-option:hover {
border-color: var(--color-blue-common);
background: rgba(64, 158, 255, 0.1);
background: rgb(64 158 255 / 10%);
}
.radio-input {
@@ -1289,13 +1287,13 @@ onBeforeMount(async () => {
}
.radio-indicator {
width: 16px;
height: 16px;
position: relative;
border: 2px solid var(--color-border);
border-radius: 50%;
transition: all 0.2s ease;
position: relative;
width: 16px;
height: 16px;
background: var(--color-background-primary);
transition: all 0.2s ease;
}
.radio-input:checked + .radio-indicator {
@@ -1304,21 +1302,21 @@ onBeforeMount(async () => {
}
.radio-input:checked + .radio-indicator::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
width: 8px;
height: 8px;
background: var(--color-blue-common);
border-radius: 50%;
content: '';
transform: translate(-50%, -50%);
}
.radio-label {
font-size: 0.875rem;
color: var(--color-text-primary);
font-weight: 500;
color: var(--color-text-primary);
}
/* Position Grid */
@@ -1330,74 +1328,74 @@ onBeforeMount(async () => {
}
.position-button {
padding: 0.75rem;
background: var(--color-background-primary);
border: 1px solid var(--color-border);
border-radius: 6px;
color: var(--color-text-secondary);
padding: 0.75rem;
font-size: 0.75rem;
cursor: pointer;
transition: all 0.2s ease;
text-align: center;
font-weight: 500;
text-align: center;
color: var(--color-text-secondary);
background: var(--color-background-primary);
transition: all 0.2s ease;
cursor: pointer;
}
.position-button:hover {
border-color: var(--color-blue-common);
color: var(--color-text-primary);
background: rgba(64, 158, 255, 0.1);
background: rgb(64 158 255 / 10%);
}
.position-button.active {
background: var(--color-blue-common);
border-color: var(--color-blue-common);
color: white;
box-shadow: 0 2px 4px rgba(64, 158, 255, 0.3);
background: var(--color-blue-common);
box-shadow: 0 2px 4px rgb(64 158 255 / 30%);
}
/* Buttons */
.btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1rem;
border: 1px solid var(--color-border);
border-radius: 6px;
background: var(--color-background-primary);
color: var(--color-text-primary);
padding: 0.75rem 1rem;
font-size: 0.875rem;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
text-decoration: none;
color: var(--color-text-primary);
background: var(--color-background-primary);
transition: all 0.2s ease;
gap: 0.5rem;
cursor: pointer;
}
.btn:hover {
background: var(--color-background-secondary);
border-color: var(--color-blue-common);
background: var(--color-background-secondary);
}
.btn-primary {
background: var(--color-blue-common);
border-color: var(--color-blue-common);
color: white;
background: var(--color-blue-common);
}
.btn-primary:hover {
background: var(--color-primary);
border-color: var(--color-primary);
background: var(--color-primary);
}
.btn-secondary {
background: var(--color-background-primary);
border-color: var(--color-border);
color: var(--color-text-secondary);
background: var(--color-background-primary);
}
.btn-secondary:hover {
background: var(--color-background-secondary);
border-color: var(--color-border-secondary);
color: var(--color-text-primary);
background: var(--color-background-secondary);
}
/* Small text */
@@ -1413,12 +1411,12 @@ small {
.watermark-settings,
.resize-settings {
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid var(--color-border-secondary);
padding-top: 1rem;
}
/* Responsive Design */
@media (max-width: 768px) {
@media (width <= 768px) {
.image-process-settings {
padding: 1rem;
}
@@ -1468,17 +1466,17 @@ small {
:root.auto.dark .settings-header,
:root.auto.dark .tab-navigation,
:root.auto.dark .settings-section {
background: var(--color-background-tertiary);
border-color: var(--color-border);
background: var(--color-background-tertiary);
}
:root.dark .form-input,
:root.dark .form-textarea,
:root.auto.dark .form-input,
:root.auto.dark .form-textarea {
background: var(--color-surface);
border-color: var(--color-border);
color: var(--color-text-primary);
background: var(--color-surface);
}
:root.dark .switch-slider::before,
@@ -1488,24 +1486,25 @@ small {
:root.dark .btn-secondary,
:root.auto.dark .btn-secondary {
background: var(--color-surface);
border-color: var(--color-border);
color: var(--color-text-secondary);
background: var(--color-surface);
}
:root.dark .btn-secondary:hover,
:root.auto.dark .btn-secondary:hover {
background: var(--color-background-tertiary);
border-color: var(--color-border-hover);
color: var(--color-text-primary);
background: var(--color-background-tertiary);
}
:root.dark .switch-label,
:root.auto.dark .switch-label {
background: var(--color-surface);
border-color: var(--color-border);
color: var(--color-text-secondary);
background: var(--color-surface);
}
:root.dark .switch-title,
:root.auto.dark .switch-title {
color: var(--color-text-primary);
@@ -1518,9 +1517,9 @@ small {
:root.dark .position-button,
:root.auto.dark .position-button {
background: var(--color-surface);
border-color: var(--color-border);
color: var(--color-text-secondary);
background: var(--color-surface);
}
:root.dark .position-button:hover,
@@ -1532,15 +1531,15 @@ small {
:root.dark .position-button.active,
:root.auto.dark .position-button.active {
background: var(--color-primary);
border-color: var(--color-primary);
color: var(--color-text-inverse);
background: var(--color-primary);
}
:root.dark .radio-group,
:root.auto.dark .radio-group {
background: var(--color-background-tertiary);
border-color: var(--color-border);
color: var(--color-text-secondary);
background: var(--color-background-tertiary);
}
</style>

31
src/renderer/components/ImageWebdav.vue
View File

@@ -54,15 +54,15 @@ async function getWebdavHeader(key: string) {
formatEndpoint(props.config.endpoint, props.config.sslEnabled || false),
`/${key.replace(/^\//, '')}`,
props.config.username,
props.config.password
props.config.password,
)
headers = {
Authorization: authHeader
Authorization: authHeader,
}
} else {
headers = {
Authorization:
'Basic ' + window.node.buffer.from(`${props.config.username}:${props.config.password}`).toString('base64')
'Basic ' + window.node.buffer.from(`${props.config.username}:${props.config.password}`).toString('base64'),
}
}
return headers
@@ -107,36 +107,36 @@ onMounted(fetchImage)
<style scoped>
.image-container {
height: 100px;
width: 100%;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
position: relative;
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
width: 100%;
height: 100px;
}
.image {
max-height: 100%;
max-width: 100%;
object-fit: contain;
display: block;
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.loading-placeholder {
display: flex;
align-items: center;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
.loading-spinner {
width: 24px;
height: 24px;
border: 2px solid #e4e7ed;
border-top: 2px solid #409eff;
border-radius: 50%;
width: 24px;
height: 24px;
animation: spin 1s linear infinite;
}
@@ -144,6 +144,7 @@ onMounted(fetchImage)
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}

109
src/renderer/components/InputBoxDialog.vue
View File

@@ -58,7 +58,7 @@ const showInputBoxVisible = ref(false)
const inputBoxOptions = reactive({
title: '',
placeholder: '',
multiLine: false
multiLine: false,
})
let removeInputBoxListenerCallback: () => void = () => {}
@@ -101,54 +101,51 @@ onBeforeUnmount(() => {
<script lang="ts">
export default {
name: 'InputBoxDialog'
name: 'InputBoxDialog',
}
</script>
<style scoped>
.inputbox-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
inset: 0;
z-index: 2000;
display: flex;
justify-content: center;
align-items: center;
background: rgb(0 0 0 / 50%);
}
.inputbox-container {
background: white;
border-radius: 0.75rem;
box-shadow:
0 20px 25px -5px rgba(0, 0, 0, 0.1),
0 10px 10px -5px rgba(0, 0, 0, 0.04);
max-width: 32rem;
width: 90%;
max-height: 80vh;
overflow: hidden;
border-radius: 0.75rem;
width: 90%;
max-width: 32rem;
max-height: 80vh;
background: white;
box-shadow:
0 20px 25px -5px rgb(0 0 0 / 10%),
0 10px 10px -5px rgb(0 0 0 / 4%);
}
:root.dark .inputbox-container,
:root.auto.dark .inputbox-container {
background: rgb(31 41 55);
border: 1px solid rgb(55 65 81);
background: rgb(31 41 55);
}
.inputbox-header {
padding: 1.5rem 1.5rem 0 1.5rem;
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.5rem 1.5rem 0;
}
.inputbox-title {
margin: 0;
font-size: 1.25rem;
font-weight: 600;
color: rgb(17 24 39);
margin: 0;
}
:root.dark .inputbox-title,
@@ -157,22 +154,22 @@ export default {
}
.inputbox-close {
background: none;
display: flex;
justify-content: center;
align-items: center;
border: none;
color: rgb(107 114 128);
cursor: pointer;
border-radius: 0.25rem;
padding: 0.25rem;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 0.25rem;
color: rgb(107 114 128);
background: none;
cursor: pointer;
}
.inputbox-close:hover {
background: rgb(243 244 246);
color: rgb(17 24 39);
background: rgb(243 244 246);
}
:root.dark .inputbox-close,
@@ -182,8 +179,8 @@ export default {
:root.dark .inputbox-close:hover,
:root.auto.dark .inputbox-close:hover {
background: rgb(55 65 81);
color: rgb(243 244 246);
background: rgb(55 65 81);
}
.inputbox-content {
@@ -191,21 +188,21 @@ export default {
}
.inputbox-input {
width: 100%;
padding: 0.75rem 1rem;
border: 1px solid rgb(209 213 219);
border-radius: 0.5rem;
background: white;
color: rgb(17 24 39);
padding: 0.75rem 1rem;
width: 100%;
font-size: 0.875rem;
font-family: inherit;
transition: all 0.2s ease;
color: rgb(17 24 39);
background: white;
outline: none;
transition: all 0.2s ease;
}
.inputbox-input:focus {
border-color: rgb(59 130 246);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
box-shadow: 0 0 0 3px rgb(59 130 246 / 10%);
}
.inputbox-input::placeholder {
@@ -213,23 +210,23 @@ export default {
}
.inputbox-textarea {
width: 100%;
border: 1px solid rgb(209 213 219);
border-radius: 0.375rem;
padding: 0.5rem 0.75rem;
background: white;
color: rgb(17 24 39);
width: 100%;
min-height: 4rem;
font-size: 0.875rem;
font-family: inherit;
transition: all 0.2s ease;
color: rgb(17 24 39);
background: white;
outline: none;
resize: vertical;
min-height: 4rem;
transition: all 0.2s ease;
}
.inputbox-textarea:focus {
border-color: rgb(59 130 246);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
box-shadow: 0 0 0 3px rgb(59 130 246 / 10%);
}
.inputbox-textarea::placeholder {
@@ -238,15 +235,15 @@ export default {
:root.dark .inputbox-input,
:root.auto.dark .inputbox-input {
background: rgb(55 65 81);
border-color: rgb(75 85 99);
color: rgb(243 244 246);
background: rgb(55 65 81);
}
:root.dark .inputbox-input:focus,
:root.auto.dark .inputbox-input:focus {
border-color: rgb(59 130 246);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
box-shadow: 0 0 0 3px rgb(59 130 246 / 10%);
}
:root.dark .inputbox-input::placeholder,
@@ -256,15 +253,15 @@ export default {
:root.dark .inputbox-textarea,
:root.auto.dark .inputbox-textarea {
background: rgb(55 65 81);
border-color: rgb(75 85 99);
color: rgb(243 244 246);
background: rgb(55 65 81);
}
:root.dark .inputbox-textarea:focus,
:root.auto.dark .inputbox-textarea:focus {
border-color: rgb(59 130 246);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
box-shadow: 0 0 0 3px rgb(59 130 246 / 10%);
}
:root.dark .inputbox-textarea::placeholder,
@@ -274,25 +271,25 @@ export default {
.inputbox-actions {
display: flex;
gap: 0.75rem;
padding: 0 1.5rem 1.5rem 1.5rem;
justify-content: flex-end;
padding: 0 1.5rem 1.5rem;
gap: 0.75rem;
}
.inputbox-btn {
padding: 0.5rem 1rem;
border: none;
border-radius: 0.375rem;
padding: 0.5rem 1rem;
min-width: 4rem;
font-size: 0.875rem;
font-weight: 500;
border: none;
cursor: pointer;
min-width: 4rem;
}
.cancel-btn {
background: rgb(243 244 246);
color: rgb(75 85 99);
border: 1px solid rgb(209 213 219);
color: rgb(75 85 99);
background: rgb(243 244 246);
}
.cancel-btn:hover {
@@ -301,9 +298,9 @@ export default {
:root.dark .cancel-btn,
:root.auto.dark .cancel-btn {
background: rgb(55 65 81);
color: rgb(209 213 219);
border-color: rgb(75 85 99);
color: rgb(209 213 219);
background: rgb(55 65 81);
}
:root.dark .cancel-btn:hover,
@@ -312,8 +309,8 @@ export default {
}
.confirm-btn.primary {
background: rgb(59 130 246);
color: white;
background: rgb(59 130 246);
}
.confirm-btn.primary:hover {

214
src/renderer/components/NavigationPage.vue
View File

@@ -171,7 +171,7 @@ import {
ListboxOption,
ListboxOptions,
TransitionChild,
TransitionRoot
TransitionRoot,
} from '@headlessui/vue'
import { pick } from 'lodash-es'
import {
@@ -186,7 +186,7 @@ import {
Info,
PlugIcon,
Settings,
UploadIcon
UploadIcon,
} from 'lucide-vue-next'
import QrcodeVue from 'qrcode.vue'
import pkg from 'root/package.json'
@@ -232,7 +232,7 @@ watch(
})
}
},
{ deep: true }
{ deep: true },
)
const visiblePicBeds = computed(() => picBedGlobal.value.filter(item => item.visible))
@@ -270,8 +270,8 @@ const navigationItems = computed(() => [
{
name: t('navigation.plugins'),
path: '/main-page/plugins',
icon: PlugIcon
}
icon: PlugIcon,
},
])
function openGithubPage() {
@@ -297,13 +297,13 @@ onBeforeUnmount(() => {
<style scoped>
.navigation {
display: flex;
flex-direction: column;
overflow: hidden;
border-right: 1px solid rgb(229 231 235);
width: 150px;
height: 100vh;
background: var(--color-background-secondary);
border-right: 1px solid rgb(229 231 235);
overflow: hidden;
transition: width 0.3s ease;
flex-direction: column;
}
.navigation.collapsed {
@@ -312,18 +312,18 @@ onBeforeUnmount(() => {
:root.dark .navigation,
:root.auto.dark .navigation {
background: var(--color-background-secondary);
border-right-color: var(--color-background-secondary);
background: var(--color-background-secondary);
}
.title-bar {
display: flex;
align-items: center;
justify-content: center;
padding: 1.25rem 1rem;
border-bottom: 1px solid var(--color-border);
background: var(--color-background-secondary);
position: relative;
display: flex;
justify-content: center;
align-items: center;
border-bottom: 1px solid var(--color-border);
padding: 1.25rem 1rem;
background: var(--color-background-secondary);
}
.navigation.collapsed .title-bar {
@@ -332,24 +332,24 @@ onBeforeUnmount(() => {
.collapse-button {
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
background: transparent;
border: none;
color: var(--color-text-primary);
cursor: pointer;
padding: 4px;
border-radius: 4px;
transition: all 0.2s ease;
right: 8px;
display: flex;
align-items: center;
justify-content: center;
align-items: center;
border: none;
border-radius: 4px;
padding: 4px;
color: var(--color-text-primary);
background: transparent;
transition: all 0.2s ease;
transform: translateY(-50%);
cursor: pointer;
}
.collapse-button:hover {
background: var(--color-surface-elevated);
color: var(--color-text-primary);
background: var(--color-surface-elevated);
}
.navigation.collapsed .collapse-button {
@@ -383,21 +383,21 @@ onBeforeUnmount(() => {
}
.app-version {
border: 1px solid var(--color-border);
border-radius: 12px;
padding: 3px 8px;
font-size: 10px;
font-weight: 500;
color: var(--color-text-secondary);
background: var(--color-surface-elevated);
padding: 3px 8px;
border-radius: 12px;
border: 1px solid var(--color-border);
}
.theme-section {
display: flex;
align-items: center;
justify-content: center;
padding: 0.75rem;
align-items: center;
border-bottom: 1px solid var(--color-border);
padding: 0.75rem;
}
:root.dark .theme-section,
@@ -406,29 +406,29 @@ onBeforeUnmount(() => {
}
.nav-menu {
flex: 1;
padding: 1rem 0;
overflow-y: auto;
padding: 1rem 0;
min-height: 0;
flex: 1;
}
.nav-item {
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
align-items: center;
padding: 0.75rem 1rem;
color: rgb(75 85 99);
text-decoration: none;
font-size: 0.875rem;
font-weight: 500;
text-decoration: none;
color: rgb(75 85 99);
transition: all 0.2s ease;
gap: 0.75rem;
cursor: pointer;
}
.navigation.collapsed .nav-item {
padding: 0.75rem 0.5rem;
justify-content: center;
padding: 0.75rem 0.5rem;
gap: 0;
}
@@ -442,82 +442,83 @@ onBeforeUnmount(() => {
}
.nav-item:hover {
background: rgb(243 244 246);
color: rgb(17 24 39);
background: rgb(243 244 246);
}
:root.dark .nav-item:hover,
:root.auto.dark .nav-item:hover {
background: rgb(55 65 81);
color: rgb(243 244 246);
background: rgb(55 65 81);
}
.nav-item.router-link-active {
background: rgb(239 246 255);
color: rgb(99 102 241);
border-right: 3px solid rgb(99 102 241);
color: rgb(99 102 241);
background: rgb(239 246 255);
}
:root.dark .nav-item.router-link-active,
:root.auto.dark .nav-item.router-link-active {
background: rgb(30 58 138 / 0.2);
color: rgb(129 140 248);
border-right-color: rgb(129 140 248);
color: rgb(129 140 248);
background: rgb(30 58 138 / 20%);
}
.nav-icon-container {
position: relative;
display: flex;
align-items: center;
justify-content: center;
align-items: center;
width: 20px;
height: 20px;
flex-shrink: 0;
}
.sidebar-footer {
padding: 12px;
border-top: 1px solid var(--color-border);
padding: 12px;
}
.footer-button {
cursor: pointer;
position: fixed;
bottom: 4px;
left: 4px;
border: none;
border-radius: 6px;
padding: 8px;
color: var(--color-text-secondary);
background: transparent;
border: none;
padding: 8px;
border-radius: 6px;
cursor: pointer;
}
.footer-button:hover {
background: var(--color-surface-elevated);
color: var(--color-text-primary);
background: var(--color-surface-elevated);
}
.nav-submenu {
margin-top: 4px;
justify-content: center;
position: relative;
justify-content: center;
margin-top: 4px;
}
.submenu-trigger {
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
align-items: center;
border: none;
padding: 0.75rem 1rem;
color: rgb(75 85 99);
text-decoration: none;
width: 100%;
font-size: 0.875rem;
font-weight: 500;
transition: all 0.2s ease;
text-decoration: none;
color: rgb(75 85 99);
background: transparent;
border: none;
width: 100%;
transition: all 0.2s ease;
gap: 0.75rem;
cursor: pointer;
position: relative;
}
:root.dark .submenu-trigger,
@@ -526,14 +527,14 @@ onBeforeUnmount(() => {
}
.submenu-trigger:hover {
background: rgb(243 244 246);
color: rgb(17 24 39);
background: rgb(243 244 246);
}
:root.dark .submenu-trigger:hover,
:root.auto.dark .submenu-trigger:hover {
background: rgb(55 65 81);
color: rgb(243 244 246);
background: rgb(55 65 81);
}
.submenu-trigger .nav-icon-container {
@@ -556,9 +557,9 @@ onBeforeUnmount(() => {
}
.submenu-panel {
display: flex;
margin-top: 2px;
padding-left: 2.75rem;
display: flex;
flex-direction: column;
gap: 4px;
}
@@ -566,19 +567,19 @@ onBeforeUnmount(() => {
.submenu-item {
display: flex;
align-items: center;
border-radius: 6px;
padding: 0.5rem 1rem;
color: var(--color-text-secondary);
text-decoration: none;
font-size: 0.8125rem;
font-weight: 500;
border-radius: 6px;
text-decoration: none;
color: var(--color-text-secondary);
transition: all 0.2s ease;
cursor: pointer;
}
.submenu-item:hover {
background: var(--color-surface-elevated);
color: var(--color-text-primary);
background: var(--color-surface-elevated);
}
.collapsed-picbed {
@@ -586,54 +587,54 @@ onBeforeUnmount(() => {
}
.collapsed-picbed:hover {
background: rgb(243 244 246);
color: rgb(17 24 39);
background: rgb(243 244 246);
}
:root.dark .collapsed-picbed:hover,
:root.auto.dark .collapsed-picbed:hover {
background: rgb(55 65 81);
color: rgb(243 244 246);
background: rgb(55 65 81);
}
.qr-dialog {
position: fixed;
inset: 0;
z-index: 50;
display: flex;
overflow-y: auto;
align-items: center;
justify-content: center;
align-items: center;
overflow-y: auto;
inset: 0;
}
.dialog-container {
position: fixed;
inset: 0;
z-index: 50;
overflow-y: auto;
display: flex;
min-height: 100vh;
align-items: center;
justify-content: center;
align-items: center;
overflow-y: auto;
padding: 16px;
min-height: 100vh;
inset: 0;
}
.dialog-panel {
overflow: hidden;
border: 1px solid var(--color-border);
border-radius: 16px;
width: 100%;
max-width: 500px;
background: var(--color-background-primary);
border-radius: 16px;
border: 1px solid var(--color-border);
box-shadow: var(--shadow-md);
overflow: hidden;
}
.dialog-title {
margin: 0;
padding: 20px 24px 0;
font-size: 18px;
font-weight: 600;
color: var(--color-text-primary);
margin: 0;
}
.dialog-content {
@@ -658,17 +659,17 @@ onBeforeUnmount(() => {
.listbox-button {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 12px 16px;
background: var(--color-surface);
align-items: center;
border: 1px solid var(--color-border);
border-radius: var(--border-radius);
padding: 12px 16px;
width: 100%;
font-size: 14px;
color: var(--color-text-primary);
cursor: pointer;
background: var(--color-surface);
transition: var(--transition);
cursor: pointer;
}
.listbox-button:hover {
@@ -690,27 +691,27 @@ onBeforeUnmount(() => {
.listbox-options {
position: absolute;
top: 100%;
left: 0;
right: 0;
left: 0;
z-index: 10;
overflow-y: auto;
margin-top: 4px;
background: var(--color-background-primary);
border: 1px solid var(--color-border);
border-radius: var(--border-radius);
box-shadow: var(--shadow-md);
max-height: 300px;
overflow-y: auto;
background: var(--color-background-primary);
box-shadow: var(--shadow-md);
}
.listbox-option {
display: flex;
align-items: center;
justify-content: space-between;
align-items: center;
padding: 12px 16px;
font-size: 14px;
color: var(--color-text-primary);
cursor: pointer;
transition: var(--transition);
cursor: pointer;
}
.listbox-option.active {
@@ -718,24 +719,24 @@ onBeforeUnmount(() => {
}
.listbox-option.selected {
background: var(--color-accent);
color: white;
background: var(--color-accent);
}
.copy-button {
display: flex;
align-items: center;
gap: 8px;
margin-top: 12px;
padding: 10px 16px;
background: var(--color-accent);
color: white;
border: none;
border-radius: var(--border-radius);
padding: 10px 16px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
color: white;
background: var(--color-accent);
transition: var(--transition);
gap: 8px;
cursor: pointer;
}
.copy-button:hover {
@@ -749,34 +750,35 @@ onBeforeUnmount(() => {
}
.qr-code {
border-radius: var(--border-radius);
overflow: hidden;
border-radius: var(--border-radius);
box-shadow: var(--shadow-sm);
}
.dialog-actions {
padding: 0 24px 20px;
display: flex;
justify-content: flex-end;
padding: 0 24px 20px;
gap: 12px;
}
.cancel-button {
padding: 10px 20px;
background: var(--color-surface-elevated);
color: var(--color-text-primary);
border: 1px solid var(--color-border);
border-radius: var(--border-radius);
padding: 10px 20px;
font-size: 14px;
cursor: pointer;
color: var(--color-text-primary);
background: var(--color-surface-elevated);
transition: var(--transition);
cursor: pointer;
}
.cancel-button:hover {
background: var(--color-border);
}
/* Responsive Design */
@media (max-width: 768px) {
@media (width <= 768px) {
.navigation {
width: 60px;
}
@@ -804,8 +806,8 @@ onBeforeUnmount(() => {
}
::-webkit-scrollbar-thumb {
border-radius: 0;
background: var(--color-border);
border-radius: 0px;
}
::-webkit-scrollbar-thumb:hover {

142
src/renderer/components/PerPicbedSetting.vue
View File

@@ -152,7 +152,7 @@ withDefaults(defineProps<Props>(), {
numberMax: 1000,
textPlaceholder: '',
selectOptions: () => [],
radioOptions: () => []
radioOptions: () => [],
})
const emit = defineEmits<{
@@ -164,7 +164,7 @@ const showSettings = ref(false)
const availablePicbeds = computed(() => {
return picBedGlobal.value.map(picbed => ({
type: picbed.type,
name: picbed.name
name: picbed.name,
}))
})
@@ -195,35 +195,35 @@ function handleMapChange(picbedType: string, value: any) {
.btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1rem;
border: 1px solid var(--color-border);
border-radius: 6px;
background: var(--color-background-primary);
color: var(--color-text-primary);
padding: 0.75rem 1rem;
font-size: 0.875rem;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
text-decoration: none;
color: var(--color-text-primary);
background: var(--color-background-primary);
transition: all 0.2s ease;
gap: 0.5rem;
cursor: pointer;
line-height: 1;
}
.btn:hover {
background: var(--color-background-secondary);
border-color: var(--color-blue-common);
background: var(--color-background-secondary);
}
.btn-secondary {
background: var(--color-background-primary);
border-color: var(--color-border);
color: var(--color-text-secondary);
background: var(--color-background-primary);
}
.btn-secondary:hover {
background: var(--color-background-secondary);
border-color: var(--color-border-secondary);
color: var(--color-text-primary);
background: var(--color-background-secondary);
}
.btn-small {
@@ -235,15 +235,15 @@ function handleMapChange(picbedType: string, value: any) {
/* Settings panel */
.map-settings-panel {
margin-top: 1rem;
padding: 1rem;
border: 1px solid var(--color-border);
border-radius: 8px;
padding: 1rem;
background: var(--color-background-secondary);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
}
.map-settings-panel h4 {
margin: 0 0 1rem 0;
margin: 0 0 1rem;
font-size: 1rem;
font-weight: 600;
color: var(--color-text-primary);
@@ -258,27 +258,27 @@ function handleMapChange(picbedType: string, value: any) {
.picbed-setting-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.75rem;
align-items: center;
border: 1px solid var(--color-border);
border-radius: 6px;
padding: 0.75rem;
background: var(--color-background-primary);
transition: all 0.2s ease;
}
.picbed-setting-item:hover {
border-color: var(--color-blue-common);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
}
.picbed-name {
margin: 0;
min-width: 0;
font-size: 0.875rem;
font-weight: 500;
color: var(--color-text-primary);
margin: 0;
flex: 1;
min-width: 0;
}
/* Switch component */
@@ -290,8 +290,8 @@ function handleMapChange(picbedType: string, value: any) {
}
.switch-label.small {
padding: 0;
margin: 0;
padding: 0;
}
.switch-input {
@@ -300,25 +300,25 @@ function handleMapChange(picbedType: string, value: any) {
.switch-slider {
position: relative;
border-radius: 12px;
width: 44px;
height: 24px;
background: var(--color-border-darker);
border-radius: 12px;
transition: all 0.3s ease;
flex-shrink: 0;
}
.switch-slider::before {
content: '';
position: absolute;
top: 2px;
left: 2px;
border-radius: 50%;
width: 20px;
height: 20px;
background: #ffffff;
border-radius: 50%;
box-shadow: 0 2px 4px rgb(0 0 0 / 20%);
transition: all 0.3s ease;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
content: '';
}
.switch-input:checked + .switch-slider {
@@ -335,60 +335,58 @@ function handleMapChange(picbedType: string, value: any) {
.form-color {
border: 1px solid var(--color-border);
border-radius: 6px;
background: var(--color-background-primary);
color: var(--color-text-primary);
transition: all 0.2s ease;
background: var(--color-background-primary);
outline: none;
transition: all 0.2s ease;
}
.form-input:focus,
.form-color:focus {
border-color: var(--color-blue-common);
box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
box-shadow: 0 0 0 2px rgb(64 158 255 / 20%);
}
.form-input.small {
width: 100px;
padding: 0.375rem 0.5rem;
width: 100px;
font-size: 0.875rem;
}
.form-range.small {
border-radius: 3px;
width: 100px;
height: 6px;
-webkit-appearance: none;
appearance: none;
background: var(--color-border-darker);
border-radius: 3px;
appearance: none;
}
.form-range.small::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
border: 2px solid #ffffff;
border-radius: 50%;
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--color-blue-common);
box-shadow: 0 2px 4px rgb(0 0 0 / 20%);
appearance: none;
cursor: pointer;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
border: 2px solid #ffffff;
}
.form-range.small::-moz-range-thumb {
border: 2px solid #ffffff;
border-radius: 50%;
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--color-blue-common);
box-shadow: 0 2px 4px rgb(0 0 0 / 20%);
cursor: pointer;
border: 2px solid #ffffff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.form-color.small {
padding: 0;
width: 40px;
height: 32px;
cursor: pointer;
padding: 0;
}
/* Range input container */
@@ -399,15 +397,15 @@ function handleMapChange(picbedType: string, value: any) {
}
.range-value {
border-radius: 4px;
padding: 0.125rem 0.25rem;
min-width: 50px;
font-size: 0.875rem;
color: var(--color-text-secondary);
text-align: center;
padding: 0.125rem 0.25rem;
background: var(--color-blue-common);
color: white;
border-radius: 4px;
font-weight: 500;
text-align: center;
color: var(--color-text-secondary);
color: white;
background: var(--color-blue-common);
}
/* Color input group */
@@ -431,19 +429,19 @@ function handleMapChange(picbedType: string, value: any) {
.radio-option.small {
display: flex;
align-items: center;
gap: 0.25rem;
cursor: pointer;
padding: 0.25rem 0.5rem;
border: 1px solid var(--color-border);
border-radius: 4px;
transition: all 0.2s ease;
background: var(--color-background-primary);
padding: 0.25rem 0.5rem;
font-size: 0.75rem;
background: var(--color-background-primary);
transition: all 0.2s ease;
gap: 0.25rem;
cursor: pointer;
}
.radio-option.small:hover {
border-color: var(--color-blue-common);
background: rgba(64, 158, 255, 0.1);
background: rgb(64 158 255 / 10%);
}
.radio-input {
@@ -451,13 +449,13 @@ function handleMapChange(picbedType: string, value: any) {
}
.radio-indicator {
width: 14px;
height: 14px;
position: relative;
border: 2px solid var(--color-border);
border-radius: 50%;
transition: all 0.2s ease;
position: relative;
width: 14px;
height: 14px;
background: var(--color-background-primary);
transition: all 0.2s ease;
flex-shrink: 0;
}
@@ -466,21 +464,21 @@ function handleMapChange(picbedType: string, value: any) {
}
.radio-input:checked + .radio-indicator::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
width: 6px;
height: 6px;
background: var(--color-blue-common);
border-radius: 50%;
content: '';
transform: translate(-50%, -50%);
}
.radio-label {
font-size: inherit;
color: var(--color-text-primary);
font-weight: 500;
color: var(--color-text-primary);
}
/* Select styling */
@@ -498,7 +496,7 @@ select.form-input:focus {
}
/* Responsive design */
@media (max-width: 768px) {
@media (width <= 768px) {
.picbed-setting-item {
flex-direction: column;
align-items: flex-start;
@@ -529,30 +527,30 @@ select.form-input:focus {
/* Dark mode styles */
:root.dark .map-settings-panel,
:root.auto.dark .map-settings-panel {
background: var(--color-background-tertiary);
border-color: var(--color-border);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
background: var(--color-background-tertiary);
box-shadow: 0 2px 8px rgb(0 0 0 / 30%);
}
:root.dark .picbed-setting-item,
:root.auto.dark .picbed-setting-item {
background: var(--color-surface);
border-color: var(--color-border);
background: var(--color-surface);
}
:root.dark .picbed-setting-item:hover,
:root.auto.dark .picbed-setting-item:hover {
border-color: var(--color-primary);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
box-shadow: 0 2px 4px rgb(0 0 0 / 30%);
}
:root.dark .form-input,
:root.dark .form-color,
:root.auto.dark .form-input,
:root.auto.dark .form-color {
background: var(--color-surface);
border-color: var(--color-border);
color: var(--color-text-primary);
background: var(--color-surface);
}
:root.dark .form-input:focus,
@@ -560,21 +558,21 @@ select.form-input:focus {
:root.auto.dark .form-input:focus,
:root.auto.dark .form-color:focus {
border-color: var(--color-primary);
box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.3);
box-shadow: 0 0 0 2px rgb(64 158 255 / 30%);
}
:root.dark .btn-secondary,
:root.auto.dark .btn-secondary {
background: var(--color-surface);
border-color: var(--color-border);
color: var(--color-text-secondary);
background: var(--color-surface);
}
:root.dark .btn-secondary:hover,
:root.auto.dark .btn-secondary:hover {
background: var(--color-background-tertiary);
border-color: var(--color-border-hover);
color: var(--color-text-primary);
background: var(--color-background-tertiary);
}
:root.dark .switch-slider::before,
@@ -584,20 +582,20 @@ select.form-input:focus {
:root.dark .radio-option.small,
:root.auto.dark .radio-option.small {
background: var(--color-surface);
border-color: var(--color-border);
background: var(--color-surface);
}
:root.dark .radio-option.small:hover,
:root.auto.dark .radio-option.small:hover {
border-color: var(--color-primary);
background: rgba(64, 158, 255, 0.2);
background: rgb(64 158 255 / 20%);
}
:root.dark .radio-indicator,
:root.auto.dark .radio-indicator {
background: var(--color-surface);
border-color: var(--color-border);
background: var(--color-surface);
}
:root.dark .radio-input:checked + .radio-indicator,

2
src/renderer/components/ToolboxHandler.vue
View File

@@ -19,7 +19,7 @@ const props = defineProps<IProps>()
<script lang="ts">
export default {
name: 'ToolboxHandler'
name: 'ToolboxHandler',
}
</script>

2
src/renderer/components/ToolboxStatusIcon.vue
View File

@@ -40,7 +40,7 @@ const icon = computed(() => {
</script>
<script lang="ts">
export default {
name: 'ToolboxStatusIcon'
name: 'ToolboxStatusIcon',
}
</script>
<style lang="stylus">

112
src/renderer/components/UnifiedConfigForm.vue
View File

@@ -144,7 +144,7 @@ interface IProps {
const props = withDefaults(defineProps<IProps>(), {
colorMode: undefined,
mode: 'picbed',
showTooltips: true
showTooltips: true,
})
const $route = useRoute()
@@ -154,7 +154,7 @@ const { t } = useI18n()
const configList = ref<IPicGoPluginConfig[]>([])
const ruleForm = reactive<IStringKeyMap>({})
const validationErrors = reactive<IStringKeyMap>({})
const visibleTooltips = reactive<{ [key: string]: boolean }>({})
const visibleTooltips = reactive<Record<string, boolean>>({})
// Watch for config changes
watch(
@@ -164,8 +164,8 @@ watch(
},
{
deep: true,
immediate: true
}
immediate: true,
},
)
function handleConfigChange(val: any) {
@@ -256,7 +256,7 @@ async function validate(): Promise<IStringKeyMap | false> {
function transformMarkdownToHTML(markdown: string) {
try {
return marked.parse(markdown)
} catch (e) {
} catch (_e) {
return markdown
}
}
@@ -341,7 +341,7 @@ function updateRuleForm(key: string, value: any) {
defineExpose({
updateRuleForm,
validate,
getConfigType
getConfigType,
})
</script>
@@ -394,18 +394,18 @@ defineExpose({
.info-icon {
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: var(--color-text-secondary);
transition: var(--transition-fast);
align-items: center;
border-radius: 50%;
padding: 2px;
color: var(--color-text-secondary);
transition: var(--transition-fast);
cursor: pointer;
}
.info-icon:hover {
color: var(--color-accent);
background: rgba(0, 122, 255, 0.1);
background: rgb(0 122 255 / 10%);
}
.tooltip-content {
@@ -413,35 +413,35 @@ defineExpose({
top: 100%;
left: 0;
z-index: 1000;
min-width: 200px;
max-width: 300px;
padding: 0.75rem;
background: var(--color-surface-elevated);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
padding: 0.75rem;
min-width: 200px;
max-width: 300px;
font-size: 0.75rem;
line-height: 1.4;
color: var(--color-text-primary);
background: var(--color-surface-elevated);
box-shadow: var(--shadow-lg);
line-height: 1.4;
}
/* Input Styles */
.form-input {
width: 100%;
padding: 0.75rem 1rem;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-surface-elevated);
color: var(--color-text-primary);
padding: 0.75rem 1rem;
width: 100%;
font-size: 0.875rem;
font-family: inherit;
color: var(--color-text-primary);
background: var(--color-surface-elevated);
transition: var(--transition-fast);
}
.form-input:focus {
outline: none;
border-color: var(--color-accent);
box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.2);
outline: none;
box-shadow: 0 0 0 2px rgb(0 122 255 / 20%);
}
.form-input::placeholder {
@@ -453,7 +453,7 @@ defineExpose({
}
.form-input.error:focus {
box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2);
box-shadow: 0 0 0 2px rgb(239 68 68 / 20%);
}
/* Select Styles */
@@ -462,23 +462,23 @@ defineExpose({
}
.form-select {
width: 100%;
padding: 0.75rem 2.5rem 0.75rem 1rem;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-surface-elevated);
color: var(--color-text-primary);
padding: 0.75rem 2.5rem 0.75rem 1rem;
width: 100%;
font-size: 0.875rem;
font-family: inherit;
color: var(--color-text-primary);
background: var(--color-surface-elevated);
transition: var(--transition-fast);
appearance: none;
cursor: pointer;
}
.form-select:focus {
outline: none;
border-color: var(--color-accent);
box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.2);
outline: none;
box-shadow: 0 0 0 2px rgb(0 122 255 / 20%);
}
.form-select.error {
@@ -486,17 +486,17 @@ defineExpose({
}
.form-select.error:focus {
box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2);
box-shadow: 0 0 0 2px rgb(239 68 68 / 20%);
}
.select-arrow {
position: absolute;
right: 1rem;
top: 50%;
transform: translateY(-50%);
right: 1rem;
color: var(--color-text-secondary);
pointer-events: none;
transition: var(--transition-fast);
transform: translateY(-50%);
pointer-events: none;
}
.select-wrapper:hover .select-arrow,
@@ -539,32 +539,32 @@ defineExpose({
.checkbox-custom {
position: relative;
width: 1.25rem;
height: 1.25rem;
border: 2px solid var(--color-border);
border-radius: var(--radius-sm);
width: 1.25rem;
height: 1.25rem;
background: var(--color-surface-elevated);
transition: var(--transition-fast);
flex-shrink: 0;
}
.checkbox-custom::after {
content: '';
position: absolute;
top: 0;
left: 3px;
top: 0px;
width: 6px;
height: 10px;
border: solid white;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
width: 6px;
height: 10px;
opacity: 0;
transition: var(--transition-fast);
content: '';
transform: rotate(45deg);
}
.checkbox-input:checked + .checkbox-custom {
background: var(--color-accent);
border-color: var(--color-accent);
background: var(--color-accent);
}
.checkbox-input:checked + .checkbox-custom::after {
@@ -572,7 +572,7 @@ defineExpose({
}
.checkbox-input:focus + .checkbox-custom {
box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.2);
box-shadow: 0 0 0 2px rgb(0 122 255 / 20%);
}
.checkbox-text {
@@ -597,10 +597,10 @@ defineExpose({
.switch-slider {
position: relative;
border-radius: 0.75rem;
width: 3rem;
height: 1.5rem;
background: var(--color-border);
border-radius: 0.75rem;
transition: var(--transition-fast);
flex-shrink: 0;
}
@@ -609,12 +609,12 @@ defineExpose({
position: absolute;
top: 2px;
left: 2px;
border-radius: 50%;
width: 1.25rem;
height: 1.25rem;
background: white;
border-radius: 50%;
transition: var(--transition-fast);
box-shadow: var(--shadow-sm);
transition: var(--transition-fast);
}
.switch-input:checked + .switch-slider {
@@ -626,7 +626,7 @@ defineExpose({
}
.switch-input:focus + .switch-slider {
box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.2);
box-shadow: 0 0 0 2px rgb(0 122 255 / 20%);
}
.switch-text {
@@ -640,16 +640,16 @@ defineExpose({
/* Error Message */
.error-message {
margin-top: 0.25rem;
font-size: 0.75rem;
color: var(--color-error, #ef4444);
margin-top: 0.25rem;
}
/* White theme adjustments */
.white .form-input,
.white .form-select {
border-color: #dddddd;
background: white;
border-color: #ddd;
}
.white .form-input:focus,
@@ -658,21 +658,21 @@ defineExpose({
}
.white .checkbox-custom {
border-color: #dddddd;
background: white;
border-color: #ddd;
}
.white .switch-slider {
background: #ddd;
background: #dddddd;
}
.white .tooltip-content {
border-color: #dddddd;
background: white;
border-color: #ddd;
}
/* Responsive Design */
@media (max-width: 768px) {
@media (width <= 768px) {
.config-form {
gap: 1.25rem;
}
@@ -697,14 +697,14 @@ defineExpose({
:root.auto.dark .form-input,
:root.dark .form-select,
:root.auto.dark .form-select {
background: var(--color-surface-elevated);
border-color: var(--color-border);
background: var(--color-surface-elevated);
}
:root.dark .checkbox-custom,
:root.auto.dark .checkbox-custom {
background: var(--color-surface-elevated);
border-color: var(--color-border);
background: var(--color-surface-elevated);
}
:root.dark .switch-slider,
@@ -714,8 +714,8 @@ defineExpose({
:root.dark .tooltip-content,
:root.auto.dark .tooltip-content {
background: var(--color-surface-elevated);
border-color: var(--color-border);
background: var(--color-surface-elevated);
}
/* Focus styles for accessibility */

20
src/renderer/components/VirtualScroller.vue
View File

@@ -55,8 +55,8 @@ const props = withDefaults(
pageMode: false,
keyField: 'id',
itemPadding: 0,
viewMode: 'grid'
}
viewMode: 'grid',
},
)
const containerRef = ref<HTMLElement | null>(null)
@@ -69,7 +69,7 @@ watch(
() => props.items,
v => {
itemsRef.value = v
}
},
)
const localViewMode = ref<'list' | 'grid'>(props.viewMode)
@@ -77,7 +77,7 @@ watch(
() => props.viewMode,
v => {
localViewMode.value = v
}
},
)
const sortedBreakpoints = computed<Breakpoint[]>(() => [...props.gridBreakpoints].sort((a, b) => a.min - b.min))
@@ -105,16 +105,16 @@ const { gridCalculations, visibleIndexes, viewportOffset, updateScrollTop, scrol
itemHeight: props.itemHeight,
containerHeight,
gridItems: effectiveCols,
bufferFactor: props.bufferFactor
bufferFactor: props.bufferFactor,
})
const contentStyles = computed(() => ({
height: `${gridCalculations.value.totalHeight}px`
height: `${gridCalculations.value.totalHeight}px`,
}))
const viewportStyle = computed(() => {
const base: Record<string, string> = {
transform: `translateY(${viewportOffset.value}px)`
transform: `translateY(${viewportOffset.value}px)`,
}
if (isGridMode.value) {
base['--items-per-row'] = String(effectiveCols.value)
@@ -173,7 +173,7 @@ onMounted(() => {
const el = containerRef.value
if (!el) return
ro = new ResizeObserver(updateContainerMetrics)
ro.observe(el)
ro.observe(el as unknown as Element)
if (props.pageMode) {
ro.observe(document.documentElement)
window.addEventListener('scroll', handlePageScroll, { passive: true })
@@ -252,11 +252,11 @@ defineExpose({ scrollTo, scrollToTop, scrollToBottom, setViewMode, toggleViewMod
}
.virtual-scroller-viewport.is-grid {
width: 100%;
display: grid;
width: 100%;
grid-template-columns: repeat(var(--items-per-row, 1), minmax(0, 1fr));
grid-auto-rows: var(--row-height, 1px);
gap: var(--item-gap, 0px);
gap: var(--item-gap, 0);
}
.virtual-scroller-viewport.is-list .virtual-scroller-item {

89
src/renderer/components/ui/ConfirmMessageBox.vue
View File

@@ -61,7 +61,7 @@ const props = withDefaults(defineProps<Props>(), {
cancelButtonText: 'Cancel',
showClose: true,
center: false,
type: undefined
type: undefined,
})
const emit = defineEmits<Emits>()
@@ -104,54 +104,51 @@ const onCancel = () => {
<script lang="ts">
export default {
name: 'ConfirmMessageBox'
name: 'ConfirmMessageBox',
}
</script>
<style scoped>
.messagebox-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
inset: 0;
z-index: 2000;
display: flex;
justify-content: center;
align-items: center;
background: rgb(0 0 0 / 50%);
}
.messagebox-container {
background: white;
border-radius: 0.75rem;
box-shadow:
0 20px 25px -5px rgba(0, 0, 0, 0.1),
0 10px 10px -5px rgba(0, 0, 0, 0.04);
max-width: 32rem;
width: 90%;
max-height: 80vh;
overflow: hidden;
border-radius: 0.75rem;
width: 90%;
max-width: 32rem;
max-height: 80vh;
background: white;
box-shadow:
0 20px 25px -5px rgb(0 0 0 / 10%),
0 10px 10px -5px rgb(0 0 0 / 4%);
}
:root.dark .messagebox-container,
:root.auto.dark .messagebox-container {
background: rgb(31 41 55);
border: 1px solid rgb(55 65 81);
background: rgb(31 41 55);
}
.messagebox-header {
padding: 1.5rem 1.5rem 0 1.5rem;
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.5rem 1.5rem 0;
}
.messagebox-title {
margin: 0;
font-size: 1.25rem;
font-weight: 600;
color: rgb(17 24 39);
margin: 0;
}
:root.dark .messagebox-title,
@@ -160,23 +157,23 @@ export default {
}
.messagebox-close {
background: none;
display: flex;
justify-content: center;
align-items: center;
border: none;
font-size: 1.5rem;
color: rgb(107 114 128);
cursor: pointer;
border-radius: 0.25rem;
padding: 0;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 0.25rem;
font-size: 1.5rem;
color: rgb(107 114 128);
background: none;
cursor: pointer;
}
.messagebox-close:hover {
background: rgb(243 244 246);
color: rgb(17 24 39);
background: rgb(243 244 246);
}
:root.dark .messagebox-close,
@@ -186,15 +183,15 @@ export default {
:root.dark .messagebox-close:hover,
:root.auto.dark .messagebox-close:hover {
background: rgb(55 65 81);
color: rgb(243 244 246);
background: rgb(55 65 81);
}
.messagebox-content {
padding: 1rem 1.5rem;
display: flex;
gap: 1rem;
align-items: flex-start;
padding: 1rem 1.5rem;
gap: 1rem;
}
.messagebox-icon {
@@ -223,9 +220,9 @@ export default {
}
.messagebox-message p {
margin: 0;
color: rgb(107 114 128);
line-height: 1.6;
margin: 0;
}
:root.dark .messagebox-message p,
@@ -235,9 +232,9 @@ export default {
.messagebox-actions {
display: flex;
gap: 0.75rem;
padding: 0 1.5rem 1.5rem 1.5rem;
justify-content: flex-end;
padding: 0 1.5rem 1.5rem;
gap: 0.75rem;
}
.messagebox-actions.center {
@@ -245,19 +242,19 @@ export default {
}
.messagebox-btn {
padding: 0.5rem 1rem;
border: none;
border-radius: 0.375rem;
padding: 0.5rem 1rem;
min-width: 4rem;
font-size: 0.875rem;
font-weight: 500;
border: none;
cursor: pointer;
min-width: 4rem;
}
.cancel-btn {
background: rgb(243 244 246);
color: rgb(75 85 99);
border: 1px solid rgb(209 213 219);
color: rgb(75 85 99);
background: rgb(243 244 246);
}
.cancel-btn:hover {
@@ -266,9 +263,9 @@ export default {
:root.dark .cancel-btn,
:root.auto.dark .cancel-btn {
background: rgb(55 65 81);
color: rgb(209 213 219);
border-color: rgb(75 85 99);
color: rgb(209 213 219);
background: rgb(55 65 81);
}
:root.dark .cancel-btn:hover,
@@ -277,8 +274,8 @@ export default {
}
.confirm-btn.primary {
background: rgb(59 130 246);
color: white;
background: rgb(59 130 246);
}
.confirm-btn.primary:hover {
@@ -286,8 +283,8 @@ export default {
}
.confirm-btn.danger {
background: rgb(239 68 68);
color: white;
background: rgb(239 68 68);
}
.confirm-btn.danger:hover {
@@ -295,8 +292,8 @@ export default {
}
.confirm-btn.success {
background: rgb(34 197 94);
color: white;
background: rgb(34 197 94);
}
.confirm-btn.success:hover {

57
src/renderer/components/ui/MessageToast.vue
View File

@@ -72,7 +72,7 @@ const addMessage = (options: MessageOptions) => {
const message: MessageItem = {
id,
...options,
showClose
showClose,
}
if (duration > 0) {
@@ -108,13 +108,13 @@ defineExpose({
warning,
info,
addMessage,
removeMessage
removeMessage,
})
</script>
<script lang="ts">
export default {
name: 'MessageToast'
name: 'MessageToast',
}
</script>
@@ -130,25 +130,25 @@ export default {
.message-toast {
display: flex;
align-items: flex-start;
gap: 0.75rem;
padding: 0.75rem 1rem;
margin-bottom: 0.5rem;
border-radius: 0.5rem;
box-shadow:
0 4px 6px -1px rgba(0, 0, 0, 0.1),
0 2px 4px -1px rgba(0, 0, 0, 0.06);
max-width: 24rem;
min-width: 20rem;
pointer-events: all;
background: white;
border: 1px solid rgb(229 231 235);
word-wrap: break-word;
border-radius: 0.5rem;
padding: 0.75rem 1rem;
min-width: 20rem;
max-width: 24rem;
background: white;
box-shadow:
0 4px 6px -1px rgb(0 0 0 / 10%),
0 2px 4px -1px rgb(0 0 0 / 6%);
gap: 0.75rem;
pointer-events: all;
overflow-wrap: break-word;
}
:root.dark .message-toast,
:root.auto.dark .message-toast {
background: rgb(31 41 55);
border-color: rgb(55 65 81);
background: rgb(31 41 55);
}
.message-info {
@@ -189,15 +189,14 @@ export default {
}
.message-content {
flex: 1;
color: rgb(75 85 99);
min-width: 0;
font-size: 0.875rem;
color: rgb(75 85 99);
flex: 1;
line-height: 1.25rem;
word-wrap: break-word;
word-break: break-word;
overflow-wrap: break-word;
hyphens: auto;
min-width: 0;
}
:root.dark .message-content,
@@ -206,22 +205,22 @@ export default {
}
.message-close {
background: none;
border: none;
color: rgb(107 114 128);
cursor: pointer;
padding: 0.25rem;
border-radius: 0.25rem;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
align-items: center;
margin-top: 0.125rem;
border: none;
border-radius: 0.25rem;
padding: 0.25rem;
color: rgb(107 114 128);
background: none;
cursor: pointer;
flex-shrink: 0;
}
.message-close:hover {
background: rgb(243 244 246);
color: rgb(75 85 99);
background: rgb(243 244 246);
}
:root.dark .message-close,
@@ -231,8 +230,8 @@ export default {
:root.dark .message-close:hover,
:root.auto.dark .message-close:hover {
background: rgb(55 65 81);
color: rgb(209 213 219);
background: rgb(55 65 81);
}
/* Transition animations */

28
src/renderer/components/ui/ThemeSwitcher.vue
View File

@@ -21,24 +21,24 @@ const themeOptions = computed(() => [
value: 'light',
label: t('settings.theme.light'),
icon: Sun,
description: t('settings.theme.lightDesc')
description: t('settings.theme.lightDesc'),
},
{
value: 'dark',
label: t('settings.theme.dark'),
icon: Moon,
description: t('settings.theme.darkDesc')
description: t('settings.theme.darkDesc'),
},
{
value: 'auto',
label: t('settings.theme.auto'),
icon: Monitor,
description: t('settings.theme.autoDesc')
}
description: t('settings.theme.autoDesc'),
},
])
const currentThemeOption = computed(
() => themeOptions.value.find(option => option.value === currentTheme.value) || themeOptions.value[0]
() => themeOptions.value.find(option => option.value === currentTheme.value) || themeOptions.value[0],
)
const toggleTheme = () => {
@@ -65,26 +65,26 @@ const toggleTheme = () => {
.theme-toggle-btn {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 0.75rem;
border: 1px solid var(--color-border);
background: rgba(255, 255, 255, 0.1);
color: var(--color-text-secondary);
border-radius: var(--radius-md);
cursor: pointer;
padding: 0.5rem 0.75rem;
font-size: 0.875rem;
color: var(--color-text-secondary);
background: rgb(255 255 255 / 10%);
transition: all 0.2s ease;
gap: 0.5rem;
cursor: pointer;
}
.theme-toggle-btn.collapsed {
justify-content: center;
padding: 0.5rem;
gap: 0;
justify-content: center;
}
.theme-toggle-btn:hover {
background: var(--color-surface-elevated);
color: var(--color-text-primary);
background: var(--color-surface-elevated);
}
.theme-label {
@@ -92,15 +92,15 @@ const toggleTheme = () => {
}
/* Mobile responsive */
@media (max-width: 768px) {
@media (width <= 768px) {
.theme-label {
display: none;
}
.theme-toggle-btn {
justify-content: center;
padding: 0.5rem;
gap: 0;
justify-content: center;
}
}
</style>

38
src/renderer/components/ui/TitleBar.vue
View File

@@ -89,21 +89,21 @@ onBeforeUnmount(() => {
.title-bar {
position: fixed;
top: 0;
left: 0;
right: 0;
left: 0;
z-index: 1000;
border-bottom: 1px solid var(--color-border);
height: 32px;
background: var(--color-background-secondary);
border-bottom: 1px solid var(--color-border);
z-index: 1000;
-webkit-app-region: drag;
}
.title-bar-content {
display: flex;
align-items: center;
justify-content: space-between;
height: 100%;
align-items: center;
padding: 0 16px;
height: 100%;
}
.title-left {
@@ -132,11 +132,11 @@ onBeforeUnmount(() => {
}
.app-version {
border-radius: 4px;
padding: 2px 6px;
font-size: 12px;
color: var(--color-text-secondary);
background: var(--color-border);
padding: 2px 6px;
border-radius: 4px;
}
.title-center {
@@ -155,24 +155,24 @@ onBeforeUnmount(() => {
}
.progress-bar {
flex: 1;
overflow: hidden;
border-radius: 2px;
height: 4px;
background: var(--color-border);
border-radius: 2px;
overflow: hidden;
flex: 1;
}
.progress-fill {
border-radius: 2px;
height: 100%;
background: var(--color-success);
border-radius: 2px;
transition: width 0.3s ease;
}
.progress-text {
min-width: 35px;
font-size: 11px;
color: var(--color-text-secondary);
min-width: 35px;
}
.title-right {
@@ -189,21 +189,21 @@ onBeforeUnmount(() => {
.control-button {
display: flex;
align-items: center;
justify-content: center;
align-items: center;
border: none;
border-radius: 4px;
width: 28px;
height: 20px;
border: none;
background: transparent;
border-radius: 4px;
color: var(--color-text-secondary);
cursor: pointer;
background: transparent;
transition: var(--transition);
cursor: pointer;
}
.control-button:hover {
background: var(--color-surface-elevated);
color: var(--color-text-primary);
background: var(--color-surface-elevated);
}
.pin-button.active {
@@ -212,7 +212,7 @@ onBeforeUnmount(() => {
}
.close-button:hover {
background: var(--color-danger);
color: white;
background: var(--color-danger);
}
</style>

10
src/renderer/components/ui/UIServiceProvider.vue
View File

@@ -37,7 +37,7 @@ const confirmOptions = reactive<ConfirmOptions>({
confirmButtonText: 'Confirm',
cancelButtonText: 'Cancel',
showClose: true,
center: false
center: false,
})
let confirmResolve: ((value: boolean) => void) | null = null
@@ -67,7 +67,7 @@ const showConfirm = (options: ConfirmOptions): Promise<boolean> => {
cancelButtonText: 'Cancel',
showClose: true,
center: false,
...options
...options,
})
confirmResolve = resolve
confirmVisible.value = true
@@ -82,20 +82,20 @@ onMounted(() => {
success: messageRef.value.success,
error: messageRef.value.error,
warning: messageRef.value.warning,
info: messageRef.value.info
info: messageRef.value.info,
})
}
// Initialize confirm service
const { setConfirmService } = useConfirm()
setConfirmService({
confirm: showConfirm
confirm: showConfirm,
})
})
</script>
<script lang="ts">
export default {
name: 'UIServiceProvider'
name: 'UIServiceProvider',
}
</script>

6
src/renderer/hooks/useAppStore.ts
View File

@@ -6,8 +6,8 @@ import type { IStringKeyMap } from '#/types/types'
export const useAppStore = defineStore('app', () => {
const settings = ref<IStringKeyMap>({
app: {
theme: 'light'
}
theme: 'light',
},
})
const loading = ref(false)
const error = ref<string | undefined>()
@@ -77,6 +77,6 @@ export const useAppStore = defineStore('app', () => {
clearError,
setTheme,
toggleTheme,
applyTheme
applyTheme,
}
})

2
src/renderer/hooks/useConfirm.ts
View File

@@ -31,7 +31,7 @@ export function useConfirm() {
return {
setConfirmService,
confirm
confirm,
}
}

2
src/renderer/hooks/useMessage.ts
View File

@@ -53,7 +53,7 @@ export function useMessage() {
success,
error,
warning,
info
info,
}
}

6
src/renderer/hooks/useVirtualGrid.ts
View File

@@ -25,7 +25,7 @@ export function useVirtualGrid(options: UseVirtualGridOptions) {
itemsPerRow,
totalRows,
rowHeight,
totalHeight
totalHeight,
}
})
@@ -101,7 +101,7 @@ export function useVirtualGrid(options: UseVirtualGridOptions) {
if (scrollTop.value > totalHeight - containerHeight.value) {
scrollTop.value = Math.max(0, totalHeight - containerHeight.value)
}
}
},
)
return {
@@ -111,6 +111,6 @@ export function useVirtualGrid(options: UseVirtualGridOptions) {
updateScrollTop,
scrollToItem,
scrollToTop,
scrollToBottom
scrollToBottom,
}
}

1722
src/renderer/i18n/locales/en.json
View File

File diff suppressed because it is too large Load Diff

1712
src/renderer/i18n/locales/zh-CN.json
View File

File diff suppressed because it is too large Load Diff

1712
src/renderer/i18n/locales/zh-TW.json
View File

File diff suppressed because it is too large Load Diff

70
src/renderer/layouts/Main.vue
View File

@@ -48,10 +48,13 @@ export default { name: 'MainPage' }
}
:root {
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.5;
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-weight: 400;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizelegibility;
--color-text-primary: #1d1d1f;
--color-text-secondary: #6e6e73;
@@ -59,11 +62,11 @@ export default { name: 'MainPage' }
--color-background-primary: #ffffff;
--color-background-secondary: #f5f5f7;
--color-background-tertiary: #fbfbfd;
--color-surface: rgba(255, 255, 255, 0.8);
--color-surface-elevated: rgba(255, 255, 255, 0.95);
--color-border: rgba(0, 0, 0, 0.1);
--color-surface: rgb(255 255 255 / 80%);
--color-surface-elevated: rgb(255 255 255 / 95%);
--color-border: rgb(0 0 0 / 10%);
--color-border-darker: #cdd0d6;
--color-border-secondary: rgba(0, 0, 0, 0.05);
--color-border-secondary: rgb(0 0 0 / 5%);
--color-primary: #6366f1;
--color-primary-hover: #4f46e5;
--color-accent: #007aff;
@@ -73,26 +76,19 @@ export default { name: 'MainPage' }
--color-warning: #f1930f;
--color-danger: #ff3b30;
--color-error: #ff3b30;
--color-error-surface: rgba(255, 59, 48, 0.1);
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.06);
--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.08), 0 4px 6px rgba(0, 0, 0, 0.05);
--shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04);
--color-error-surface: rgb(255 59 48 / 10%);
--shadow-sm: 0 1px 3px rgb(0 0 0 / 4%), 0 1px 2px rgb(0 0 0 / 6%);
--shadow-md: 0 4px 6px rgb(0 0 0 / 5%), 0 2px 4px rgb(0 0 0 / 6%);
--shadow-lg: 0 10px 15px rgb(0 0 0 / 8%), 0 4px 6px rgb(0 0 0 / 5%);
--shadow-xl: 0 20px 25px rgb(0 0 0 / 10%), 0 10px 10px rgb(0 0 0 / 4%);
--radius-sm: 6px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 16px;
--radius-2xl: 20px;
--transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
--transition-medium: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
--transition-slow: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
:root.dark,
@@ -103,10 +99,10 @@ export default { name: 'MainPage' }
--color-background-primary: #000000;
--color-background-secondary: #1c1c1e;
--color-background-tertiary: #2c2c2e;
--color-surface: rgba(28, 28, 30, 0.8);
--color-surface-elevated: rgba(44, 44, 46, 0.95);
--color-border: rgba(255, 255, 255, 0.1);
--color-border-secondary: rgba(255, 255, 255, 0.05);
--color-surface: rgb(28 28 30 / 80%);
--color-surface-elevated: rgb(44 44 46 / 95%);
--color-border: rgb(255 255 255 / 10%);
--color-border-secondary: rgb(255 255 255 / 5%);
--color-primary: #6366f1;
--color-primary-hover: #818cf8;
--color-accent: #0a84ff;
@@ -137,9 +133,9 @@ export default { name: 'MainPage' }
input,
select,
textarea {
background: var(--color-surface);
border-color: var(--color-border);
color: var(--color-text-primary);
background: var(--color-surface);
}
input::placeholder,
@@ -148,8 +144,8 @@ export default { name: 'MainPage' }
}
button {
color: var(--color-text-primary);
border-color: var(--color-border);
color: var(--color-text-primary);
}
button:hover {
@@ -158,19 +154,19 @@ export default { name: 'MainPage' }
}
body {
overflow: hidden;
font-family: inherit;
color: var(--color-text-primary);
background-color: var(--color-background-primary);
font-family: inherit;
overflow: hidden;
}
.app-container {
position: relative;
height: 100vh;
display: flex;
overflow: hidden;
background-color: var(--color-background-primary);
padding-top: 32px;
height: 100vh;
background-color: var(--color-background-primary);
}
.app-background {
@@ -184,19 +180,19 @@ body {
position: absolute;
bottom: -40%;
left: -20%;
border-radius: 50%;
width: 60%;
height: 60%;
background: radial-gradient(circle, rgba(199, 131, 233, 0.05) 0%, transparent 70%);
border-radius: 50%;
background: radial-gradient(circle, rgb(199 131 233 / 5%) 0%, transparent 70%);
}
.main-content {
position: relative;
z-index: 1;
flex: 1;
height: 100vh;
overflow: scroll;
height: 100vh;
background-color: var(--color-background-secondary);
flex: 1;
scrollbar-width: none;
-ms-overflow-style: none;
}
@@ -206,10 +202,10 @@ body {
}
.content-container {
height: 100%;
margin: 0;
padding: 0.3 rem;
max-width: none;
margin: 0;
height: 100%;
}
::-webkit-scrollbar {
@@ -222,9 +218,9 @@ body {
}
::-webkit-scrollbar-thumb {
background-color: var(--color-border);
border-radius: 6px;
border: 3px solid var(--color-background-primary);
border-radius: 6px;
background-color: var(--color-border);
transition: background-color var(--transition-fast);
}
@@ -237,8 +233,8 @@ body {
}
::selection {
background-color: rgba(0, 122, 255, 0.2);
color: var(--color-text-primary);
background-color: rgb(0 122 255 / 20%);
}
:focus {

6
src/renderer/main.ts
View File

@@ -36,15 +36,15 @@ const i18n = createI18n<[MessageSchema], 'en' | 'zh-CN' | 'zh-TW'>({
messages: {
en,
'zh-CN': zhCN,
'zh-TW': zhTW
}
'zh-TW': zhTW,
},
})
const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)
app.use(VueLazyLoad, {
loading: './loading.jpg',
error: './unknown-file-type.svg',
delay: 500
delay: 500,
})
app.use(i18n)
app.use(router)

51
src/renderer/manage/components/CustomSwitch.vue
View File

@@ -56,12 +56,12 @@ const toggleTooltip = () => {
<style scoped>
.switch-container {
display: flex;
align-items: center;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
padding: 1rem;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: 1rem;
background: var(--color-surface-elevated);
}
@@ -84,20 +84,20 @@ const toggleTooltip = () => {
.info-icon {
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
cursor: pointer;
color: var(--color-text-secondary);
transition: var(--transition-fast);
align-items: center;
border-radius: 50%;
padding: 2px;
width: 20px;
height: 20px;
color: var(--color-text-secondary);
transition: var(--transition-fast);
cursor: pointer;
}
.info-icon:hover {
color: var(--color-accent);
background: rgba(0, 122, 255, 0.1);
background: rgb(0 122 255 / 10%);
}
.info-svg {
@@ -110,16 +110,16 @@ const toggleTooltip = () => {
top: 100%;
left: 0;
z-index: 1000;
min-width: 200px;
max-width: 300px;
padding: 0.75rem;
background: var(--color-surface-elevated);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
padding: 0.75rem;
min-width: 200px;
max-width: 300px;
font-size: 0.75rem;
line-height: 1.4;
color: var(--color-text-primary);
background: var(--color-surface-elevated);
box-shadow: var(--shadow-lg);
line-height: 1.4;
}
.switch-control {
@@ -136,33 +136,30 @@ const toggleTooltip = () => {
}
.switch-input {
opacity: 0;
width: 0;
height: 0;
opacity: 0;
}
.switch-slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--color-border);
inset: 0;
border-radius: 0.75rem;
background: var(--color-border);
transition: var(--transition-fast);
cursor: pointer;
}
.switch-button {
position: absolute;
top: 2px;
left: 2px;
border-radius: 50%;
width: 1.25rem;
height: 1.25rem;
background: white;
border-radius: 50%;
transition: var(--transition-fast);
box-shadow: var(--shadow-sm);
transition: var(--transition-fast);
}
.switch-input:checked + .switch-slider {
@@ -174,14 +171,14 @@ const toggleTooltip = () => {
}
.switch-input:focus + .switch-slider {
box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.2);
box-shadow: 0 0 0 2px rgb(0 122 255 / 20%);
}
.switch-text {
min-width: 50px;
font-size: 0.875rem;
font-weight: 500;
color: var(--color-text-secondary);
min-width: 50px;
}
.switch-input:checked ~ .switch-text {
@@ -196,7 +193,7 @@ const toggleTooltip = () => {
:root.dark .tooltip-content,
:root.auto.dark .tooltip-content {
background: var(--color-surface-elevated);
border-color: var(--color-border);
background: var(--color-surface-elevated);
}
</style>

186
src/renderer/manage/pages/BucketPage.vue
View File

@@ -141,7 +141,7 @@
<template v-if="configMap.prefix !== '/'">
<template v-for="(item, index) in configMap.prefix.replace(/\/$/g, '').split('/')" :key="index">
<ChevronRightIcon class="breadcrumb-separator" />
<button class="breadcrumb-item" @click="handleBreadcrumbClick(index)">
<button class="breadcrumb-item" @click="handleBreadcrumbClick(Number(index))">
{{ item === '' ? t('pages.manage.bucket.rootFolder') : item }}
</button>
</template>
@@ -275,7 +275,7 @@
<template v-if="configMap.prefix !== '/'">
<template v-for="(item, index) in configMap.prefix.replace(/\/$/g, '').split('/')" :key="index">
<ChevronRightIcon class="breadcrumb-separator" />
<button class="breadcrumb-item" @click="handleBreadcrumbClick(index)">
<button class="breadcrumb-item" @click="handleBreadcrumbClick(Number(index))">
{{ item === '' ? t('pages.manage.bucket.rootFolder') : item }}
</button>
</template>
@@ -481,7 +481,7 @@
v-if="isShowThumbnail && item.isImage"
:src="item.url"
class="file-image"
style="width: 32px; height: 32px; object-fit: cover; border-radius: 4px"
style="border-radius: 4px; width: 32px; height: 32px; object-fit: cover"
@error="() => {}"
/>
<img
@@ -530,8 +530,8 @@
item.url,
item.fileName,
manageStore.config.settings.pasteFormat ?? '$markdown',
manageStore.config.settings.customPasteFormat ?? '$url'
)
manageStore.config.settings.customPasteFormat ?? '$url',
),
)
"
>
@@ -704,7 +704,7 @@
<div
v-if="isLoadingData"
class="modal-overlay"
style="position: fixed; bottom: 25px; right: 25px; background: none; pointer-events: none"
style="position: fixed; right: 25px; bottom: 25px; background: none; pointer-events: none"
>
<button class="action-button warning" style="pointer-events: auto" @click="cancelLoading">
<div class="loading-spinner" />
@@ -775,7 +775,7 @@
<VirtualScroller
:items="
tableData.sort((a, b) =>
b.isFolder - a.isFolder === 0 ? b.filesList.length - a.filesList.length : b.isFolder - a.isFolder
b.isFolder - a.isFolder === 0 ? b.filesList.length - a.filesList.length : b.isFolder - a.isFolder,
)
"
:item-height="60"
@@ -1181,7 +1181,7 @@
</button>
</div>
<div class="modal-content">
<pre style="user-select: text; white-space: pre-wrap; font-family: monospace">{{ textfileContent }}</pre>
<pre style="font-family: monospace; white-space: pre-wrap; user-select: text">{{ textfileContent }}</pre>
</div>
</div>
</div>
@@ -1262,7 +1262,7 @@ import {
ShrinkIcon,
Trash2Icon,
UploadIcon,
XIcon
XIcon,
} from 'lucide-vue-next'
import { marked } from 'marked'
import { v4 as uuidv4 } from 'uuid'
@@ -1286,7 +1286,7 @@ import {
formatLink,
getFileIconPath,
isValidUrl,
renameFile
renameFile,
} from '@/manage/utils/common'
import { getConfig, saveConfig } from '@/manage/utils/dataSender'
import { textFileExt } from '@/manage/utils/textfile'
@@ -1318,7 +1318,7 @@ const linkFormatArray = [
{ key: 'Markdown-link', value: 'markdown-with-link' },
{ key: 'Html', value: 'html' },
{ key: 'BBCode', value: 'bbcode' },
{ key: 'Custom', value: 'custom' }
{ key: 'Custom', value: 'custom' },
]
const linkFormatList = ['url', 'markdown', 'markdown-with-link', 'html', 'bbcode', 'custom']
@@ -1352,7 +1352,7 @@ const gridBreakpoints = ref([
{ min: 768, cols: 3 },
{ min: 1024, cols: 4 },
{ min: 1280, cols: 5 },
{ min: 1536, cols: 6 }
{ min: 1536, cols: 6 },
])
// 文件信息相关
const isShowFileInfo = ref(false)
@@ -1377,17 +1377,17 @@ const tableData = reactive([] as any[])
const isShowUploadPanel = ref(false)
const activeUpLoadTab = ref('uploading')
const uploadTaskList = ref([] as IUploadTask[])
// eslint-disable-next-line no-undef
const refreshUploadTaskId = ref<NodeJS.Timeout | undefined>(undefined)
const uploadPanelFilesList = ref([] as any[])
const cancelToken = ref('')
const isLoadingUploadPanelFiles = ref(false)
const isUploadKeepDirStructure = ref(manageStore.config.settings.isUploadKeepDirStructure ?? true)
const uploadingTaskList = computed(() =>
uploadTaskList.value.filter(item => ['uploading', 'queuing', 'paused'].includes(item.status))
uploadTaskList.value.filter(item => ['uploading', 'queuing', 'paused'].includes(item.status)),
)
const uploadedTaskList = computed(() =>
uploadTaskList.value.filter(item => ['uploaded', 'failed', 'canceled'].includes(item.status))
uploadTaskList.value.filter(item => ['uploaded', 'failed', 'canceled'].includes(item.status)),
)
// 下载页面相关
const isShowDownloadPanel = ref(false)
@@ -1395,14 +1395,14 @@ const isLoadingDownloadData = ref(false)
const activeDownLoadTab = ref('downloading')
const currentDownloadFileList = reactive([] as any[])
const downloadTaskList = ref([] as IDownloadTask[])
// eslint-disable-next-line no-undef
const refreshDownloadTaskId = ref<NodeJS.Timeout | undefined>(undefined)
const downloadCancelToken = ref('')
const downloadingTaskList = computed(() =>
downloadTaskList.value.filter(item => ['downloading', 'queuing', 'paused'].includes(item.status))
downloadTaskList.value.filter(item => ['downloading', 'queuing', 'paused'].includes(item.status)),
)
const downloadedTaskList = computed(() =>
downloadTaskList.value.filter(item => ['downloaded', 'failed', 'canceled'].includes(item.status))
downloadTaskList.value.filter(item => ['downloaded', 'failed', 'canceled'].includes(item.status)),
)
// 上传文件相关
const dialogVisible = ref(false)
@@ -1424,15 +1424,15 @@ const lastChoosed = ref<number>(-1)
const customDomainList = ref([] as any[])
const currentCustomDomain = ref('')
const isShowCustomDomainSelectList = computed(() =>
['tcyun', 'aliyun', 'qiniu', 'github'].includes(currentPicBedName.value)
['tcyun', 'aliyun', 'qiniu', 'github'].includes(currentPicBedName.value),
)
const isShowCustomDomainInput = computed(() =>
['aliyun', 'qiniu', 'tcyun', 's3plist', 'webdavplist', 'local', 'sftp'].includes(currentPicBedName.value)
['aliyun', 'qiniu', 'tcyun', 's3plist', 'webdavplist', 'local', 'sftp'].includes(currentPicBedName.value),
)
const isAutoCustomDomain = computed(() =>
manageStore.config.picBed[configMap.alias].isAutoCustomUrl === undefined
? true
: manageStore.config.picBed[configMap.alias].isAutoCustomUrl
: manageStore.config.picBed[configMap.alias].isAutoCustomUrl,
)
// 文件预览相关
const isShowMarkDownDialog = ref(false)
@@ -1448,7 +1448,7 @@ const newFolderName = ref('')
const folderNameInput = ref()
// 重命名相关
const isShowRenameFileIcon = computed(() =>
['tcyun', 'aliyun', 'qiniu', 'upyun', 's3plist', 'webdavplist', 'local', 'sftp'].includes(currentPicBedName.value)
['tcyun', 'aliyun', 'qiniu', 'upyun', 's3plist', 'webdavplist', 'local', 'sftp'].includes(currentPicBedName.value),
)
const isShowBatchRenameDialog = ref(false)
const batchRenameMatch = ref('')
@@ -1456,9 +1456,9 @@ const batchRenameReplace = ref('')
const isRenameIncludeExt = ref(false)
const isSingleRename = ref(false)
const itemToBeRenamed = ref({} as any)
// eslint-disable-next-line no-undef
let fileTransferInterval: NodeJS.Timeout | undefined
// eslint-disable-next-line no-undef
let downloadInterval: NodeJS.Timeout | undefined
// 当前页面信息相关
@@ -1468,7 +1468,7 @@ const itemsPerPage = computed(() => manageStore.config.picBed[configMap.alias].i
const calculateAllFileSize = computed(
() =>
formatFileSize(currentPageFilesInfo.reduce((total: any, item: { fileSize: any }) => total + item.fileSize, 0)) ||
'0'
'0',
)
const isShowThumbnail = computed(() => manageStore.config.settings.isShowThumbnail ?? false)
const isUsePreSignedUrl = computed(() => manageStore.config.settings.isUsePreSignedUrl ?? false)
@@ -1478,12 +1478,12 @@ const isIgnoreCase = computed(() => manageStore.config.settings.isIgnoreCase ??
// 新建文件夹相关
const isShowCreateNewFolder = computed(() =>
['aliyun', 'github', 'local', 'qiniu', 'tcyun', 's3plist', 'upyun', 'webdavplist', 'sftp'].includes(
currentPicBedName.value
)
currentPicBedName.value,
),
)
const isShowPresignedUrl = computed(() =>
['aliyun', 'github', 'qiniu', 's3plist', 'tcyun', 'webdavplist'].includes(currentPicBedName.value)
['aliyun', 'github', 'qiniu', 's3plist', 'tcyun', 'webdavplist'].includes(currentPicBedName.value),
)
function getList() {
@@ -1580,14 +1580,14 @@ function openFileSelectDialog() {
isFolder: false,
name: window.node.path.basename(item),
filesList: [],
fullPath: item
fullPath: item,
})
const index = uploadPanelFilesList.value.findIndex((file: any) => file.path === item)
if (index === -1) {
uploadPanelFilesList.value.push({
name: window.node.path.basename(item),
path: item,
size: window.node.fs.statSync(item).size
size: window.node.fs.statSync(item).size,
})
}
})
@@ -1619,7 +1619,7 @@ function webkitReadDataTransfer(dataTransfer: DataTransfer) {
name: item.name,
path: window.electron.showFilePath(item),
size: item.size,
relativePath: item.relativePath
relativePath: item.relativePath,
})
}
})
@@ -1655,7 +1655,7 @@ function webkitReadDataTransfer(dataTransfer: DataTransfer) {
},
(err: any) => {
console.error(err)
}
},
)
} else if (entry.isDirectory) {
readDirectory(entry.createReader())
@@ -1668,7 +1668,7 @@ function webkitReadDataTransfer(dataTransfer: DataTransfer) {
},
(err: any) => {
console.error(err)
}
},
)
}
@@ -1690,7 +1690,7 @@ function handleUploadFiles(files: any[]) {
filesList: [item.file],
isFolder: false,
fileSize: item.size,
fullPath: window.electron.showFilePath(item)
fullPath: window.electron.showFilePath(item),
})
}
} else {
@@ -1705,7 +1705,7 @@ function handleUploadFiles(files: any[]) {
dirObj[folderName] = {
filesList: [item],
fileSize: item.size,
path: window.electron.showFilePath(item)
path: window.electron.showFilePath(item),
}
}
}
@@ -1718,7 +1718,7 @@ function handleUploadFiles(files: any[]) {
filesList: dirObj[key].filesList,
isFolder: true,
fileSize: dirObj[key].fileSize,
fullPath: dirObj[key].path
fullPath: dirObj[key].path,
})
}
})
@@ -1735,7 +1735,7 @@ function renameFileBeforeUpload(filePath: string): string {
timestampRename: manageStore.config.settings.timestampRename,
randomStringRename: manageStore.config.settings.randomStringRename,
customRenameFormat: manageStore.config.settings.customRenameFormat,
customRename: manageStore.config.settings.customRename
customRename: manageStore.config.settings.customRename,
}
return renameFile(typeMap, fileName)
}
@@ -1748,7 +1748,7 @@ function uploadFiles() {
path: item.path.replace(/\\/g, '/'),
size: item.size,
renamedFileName: renameFileBeforeUpload(item.name),
relativePath: item.relativePath ?? ''
relativePath: item.relativePath ?? '',
})
})
if (isUploadKeepDirStructure.value) {
@@ -1763,7 +1763,7 @@ function uploadFiles() {
clearTableData()
const param = {
// tcyun
fileArray: [] as any[]
fileArray: [] as any[],
}
formateduploadPanelFilesList.forEach((item: any) => {
param.fileArray.push({
@@ -1775,7 +1775,7 @@ function uploadFiles() {
fileSize: item.size,
fileName: item.rawName,
githubBranch: currentCustomDomain.value,
aclForUpload: manageStore.config.picBed[configMap.alias].aclForUpload
aclForUpload: manageStore.config.picBed[configMap.alias].aclForUpload,
})
})
window.electron.sendRPC(IRPCActionType.MANAGE_UPLOAD_BUCKET_FILE, configMap.alias, param)
@@ -1844,7 +1844,7 @@ async function handleClickFile(item: any) {
const options = {} as any
if (currentPicBedName.value === 'webdavplist') {
options.headers = {
Authorization: `Basic ${window.node.buffer.from(`${manageStore.config.picBed[configMap.alias].username}:${manageStore.config.picBed[configMap.alias].password}`).toString('base64')}`
Authorization: `Basic ${window.node.buffer.from(`${manageStore.config.picBed[configMap.alias].username}:${manageStore.config.picBed[configMap.alias].password}`).toString('base64')}`,
}
}
if (item.isImage) {
@@ -1867,7 +1867,7 @@ async function handleClickFile(item: any) {
const content = await res.text()
markDownContent.value = await marked.parse(content)
isShowMarkDownDialog.value = true
} catch (error) {
} catch (_error) {
message.error(t('pages.manage.bucket.loadingFailed'))
}
} else if (
@@ -1880,7 +1880,7 @@ async function handleClickFile(item: any) {
const res = await fetch(fileUrl, options)
textfileContent.value = await res.text()
isShowTextFileDialog.value = true
} catch (error) {
} catch (_error) {
message.error(t('pages.manage.bucket.loadingFailed'))
}
} else if (videoExt.includes(window.node.path.extname(item.fileName).toLowerCase())) {
@@ -1905,7 +1905,7 @@ async function handleChangeCustomUrl() {
currentTransformedConfig[configMap.bucketName].customUrl = currentCustomDomain.value
} else {
currentTransformedConfig[configMap.bucketName] = {
customUrl: currentCustomDomain.value
customUrl: currentCustomDomain.value,
}
}
currentConfig.transformedConfig = JSON.stringify(currentTransformedConfig)
@@ -1924,7 +1924,7 @@ async function initCustomDomainList() {
) {
const param = {
bucketName: configMap.bucketName,
region: configMap.bucketConfig.Location
region: configMap.bucketConfig.Location,
}
let defaultUrl = ''
if (currentPicBedName.value === 'tcyun') {
@@ -1943,14 +1943,14 @@ async function initCustomDomainList() {
}
customDomainList.value.push({
label: item,
value: item
value: item,
})
})
defaultUrl !== '' &&
currentPicBedName.value !== 'github' &&
customDomainList.value.push({
label: defaultUrl,
value: defaultUrl
value: defaultUrl,
})
currentCustomDomain.value = customDomainList.value[0].value
} else {
@@ -1958,8 +1958,8 @@ async function initCustomDomainList() {
customDomainList.value = [
{
label: defaultUrl,
value: defaultUrl
}
value: defaultUrl,
},
]
currentCustomDomain.value = defaultUrl
}
@@ -1987,7 +1987,7 @@ async function initCustomDomainList() {
url = new URL(endpoint)
} else {
url = new URL(
manageStore.config.picBed[configMap.alias].sslEnabled ? `https://${endpoint}` : `http://${endpoint}`
manageStore.config.picBed[configMap.alias].sslEnabled ? `https://${endpoint}` : `http://${endpoint}`,
)
}
if (s3ForcePathStyle) {
@@ -2190,7 +2190,7 @@ watch(
() => manageStore.config.settings.isUploadKeepDirStructure,
newValue => {
isUploadKeepDirStructure.value = newValue ?? true
}
},
)
const previousPageNumber = ref(1)
@@ -2285,25 +2285,25 @@ async function handleFolderBatchDownload(item: any) {
title: t('pages.manage.bucket.downloadFolderNotice'),
confirmButtonText: t('common.confirm'),
cancelButtonText: t('common.cancel'),
type: 'warning'
type: 'warning',
})
if (!result) return
const defaultDownloadPath = await window.electron.triggerRPC<string>(
IRPCActionType.MANAGE_GET_DEFAULT_DOWNLOAD_FOLDER
IRPCActionType.MANAGE_GET_DEFAULT_DOWNLOAD_FOLDER,
)
const param = {
downloadPath: manageStore.config.settings.downloadDir ?? defaultDownloadPath,
maxDownloadFileCount: manageStore.config.settings.maxDownloadFileCount
? manageStore.config.settings.maxDownloadFileCount
: 5,
fileArray: [] as any[]
fileArray: [] as any[],
}
cancelToken.value = uuidv4()
const paramGet = {
// tcyun
bucketName: configMap.bucketName,
bucketConfig: {
Location: configMap.bucketConfig.Location
Location: configMap.bucketConfig.Location,
},
paging: paging.value,
prefix: `/${item.key.replace(/^\/+|\/+$/, '')}/`,
@@ -2312,7 +2312,7 @@ async function handleFolderBatchDownload(item: any) {
customUrl: currentCustomDomain.value,
currentPage: currentPageNumber.value,
cancelToken: cancelToken.value,
cdnUrl: configMap.cdnUrl
cdnUrl: configMap.cdnUrl,
}
isLoadingDownloadData.value = true
const downloadFileTransferStore = useDownloadFileTransferStore()
@@ -2343,7 +2343,7 @@ async function handleFolderBatchDownload(item: any) {
customUrl: currentCustomDomain.value,
downloadUrl: item.downloadUrl,
githubUrl: item.url,
githubPrivate: configMap.bucketConfig.private
githubPrivate: configMap.bucketConfig.private,
})
})
}
@@ -2362,14 +2362,14 @@ async function handleFolderBatchDownload(item: any) {
async function handleBatchDownload() {
const defaultDownloadPath = await window.electron.triggerRPC<string>(
IRPCActionType.MANAGE_GET_DEFAULT_DOWNLOAD_FOLDER
IRPCActionType.MANAGE_GET_DEFAULT_DOWNLOAD_FOLDER,
)
const param = {
downloadPath: manageStore.config.settings.downloadDir ?? defaultDownloadPath,
maxDownloadFileCount: manageStore.config.settings.maxDownloadFileCount
? manageStore.config.settings.maxDownloadFileCount
: 5,
fileArray: [] as any[]
fileArray: [] as any[],
}
selectedItems.value.forEach((item: any) => {
if (!item.isDir) {
@@ -2384,7 +2384,7 @@ async function handleBatchDownload() {
customUrl: currentCustomDomain.value,
downloadUrl: item.downloadUrl,
githubUrl: item.url,
githubPrivate: configMap.bucketConfig.private
githubPrivate: configMap.bucketConfig.private,
})
}
})
@@ -2425,19 +2425,19 @@ async function confirmCreateFolder() {
bucketName: configMap.bucketName,
region: configMap.bucketConfig.Location,
key: currentPrefix.value.slice(1) + formatedPath + '/',
githubBranch: currentCustomDomain.value
githubBranch: currentCustomDomain.value,
}
const res = await window.electron.triggerRPC<any>(
IRPCActionType.MANAGE_CREATE_BUCKET_FOLDER,
configMap.alias,
param
param,
)
if (res) {
message.success(t('pages.manage.bucket.createSuccess'))
} else {
message.error(t('pages.manage.bucket.createFailed'))
}
} catch (error) {
} catch (_error) {
message.error(t('pages.manage.bucket.createFailed'))
}
}
@@ -2465,7 +2465,7 @@ async function handleUploadFromUrl() {
uploadPanelFilesList.value.push({
name: window.node.path.basename(fPath),
path: fPath,
size: window.node.fs.statSync(fPath).size
size: window.node.fs.statSync(fPath).size,
})
}
uploadFiles()
@@ -2538,7 +2538,7 @@ async function BatchRename() {
matchedFiles[i].newName = matchedFiles[i].newName.replaceAll('{auto}', (i + 1).toString())
}
const duplicateFilesNum = matchedFiles.filter(
(item: any) => matchedFiles.filter((item2: any) => item2.newName === item.newName).length > 1
(item: any) => matchedFiles.filter((item2: any) => item2.newName === item.newName).length > 1,
).length
let successCount = 0
let failCount = 0
@@ -2551,7 +2551,7 @@ async function BatchRename() {
region: configMap.bucketConfig.Location,
oldKey: item.key,
newKey: (item.key.slice(0, item.key.lastIndexOf('/') + 1) + item.newName).replaceAll('//', '/'),
customUrl: currentCustomDomain.value
customUrl: currentCustomDomain.value,
}
window.electron
.triggerRPC<any>(IRPCActionType.MANAGE_RENAME_BUCKET_FILE, configMap.alias, param)
@@ -2613,7 +2613,7 @@ async function BatchRename() {
confirmButtonText: t('common.confirm'),
cancelButtonText: t('common.cancel'),
type: 'warning',
center: true
center: true,
})
if (!result) return
const promiseList = [] as any[]
@@ -2669,7 +2669,7 @@ async function handleBatchCopyLink(type: string) {
preSignedUrl || item.url,
item.fileName,
type,
manageStore.config.settings.customPasteFormat
manageStore.config.settings.customPasteFormat,
)
result.push(url)
}
@@ -2687,7 +2687,7 @@ async function cancelLoading() {
confirmButtonText: t('common.confirm'),
cancelButtonText: t('common.cancel'),
type: 'warning',
center: true
center: true,
})
if (!result) return
isLoadingData.value = false
@@ -2706,7 +2706,7 @@ async function cancelDownloadLoading() {
confirmButtonText: t('common.confirm'),
cancelButtonText: t('common.cancel'),
type: 'warning',
center: true
center: true,
})
if (!result) return
isLoadingData.value = false
@@ -2723,7 +2723,7 @@ async function getBucketFileListBackStage() {
// tcyun
bucketName: configMap.bucketName,
bucketConfig: {
Location: configMap.bucketConfig.Location
Location: configMap.bucketConfig.Location,
},
paging: paging.value,
prefix: currentPrefix.value,
@@ -2732,7 +2732,7 @@ async function getBucketFileListBackStage() {
customUrl: currentCustomDomain.value,
currentPage: currentPageNumber.value,
cancelToken: cancelToken.value,
cdnUrl: configMap.cdnUrl
cdnUrl: configMap.cdnUrl,
} as IStringKeyMap
isLoadingData.value = true
const fileTransferStore = useFileTransferStore()
@@ -2756,9 +2756,9 @@ async function getBucketFileListBackStage() {
key: getTableKeyOfDb(),
value: JSON.parse(
JSON.stringify({
fullList: currentPageFilesInfo
})
)
fullList: currentPageFilesInfo,
}),
),
})
if (fileTransferStore.isFinished() && fileTransferInterval) {
isLoadingData.value = false
@@ -2778,14 +2778,14 @@ async function getBucketFileList() {
// tcyun
bucketName: configMap.bucketName,
bucketConfig: {
Location: configMap.bucketConfig.Location
Location: configMap.bucketConfig.Location,
},
paging: paging.value,
prefix: currentPrefix.value,
marker: pagingMarker.value,
itemsPerPage: itemsPerPage.value,
customUrl: currentCustomDomain.value,
currentPage: currentPageNumber.value
currentPage: currentPageNumber.value,
}
return await window.electron.triggerRPC<any>(IRPCActionType.MANAGE_GET_BUCKET_FILE_LIST, configMap.alias, param)
}
@@ -2798,7 +2798,7 @@ async function handleBatchDeleteInfo() {
confirmButtonText: t('common.confirm'),
cancelButtonText: t('common.cancel'),
type: 'warning',
center: true
center: true,
})
if (!result) return
const copiedSelectedItems = JSON.parse(JSON.stringify(selectedItems.value))
@@ -2811,7 +2811,7 @@ async function handleBatchDeleteInfo() {
region: configMap.bucketConfig.Location,
key: item.key,
DeleteHash: item.sha,
githubBranch: currentCustomDomain.value
githubBranch: currentCustomDomain.value,
}
const result = item.isDir
? await window.electron.triggerRPC<any>(IRPCActionType.MANAGE_DELETE_BUCKET_FOLDER, configMap.alias, param)
@@ -2820,7 +2820,7 @@ async function handleBatchDeleteInfo() {
successCount++
currentPageFilesInfo.splice(
currentPageFilesInfo.findIndex((j: any) => j.key === item.key),
1
1,
)
if (!paging.value) {
const table = fileCacheDbInstance.table(currentPicBedName.value)
@@ -2830,7 +2830,7 @@ async function handleBatchDeleteInfo() {
.modify((l: any) => {
l.value.fullList.splice(
l.value.fullList.findIndex((j: any) => j.key === item.key),
1
1,
)
})
}
@@ -2858,7 +2858,7 @@ async function handleDeleteFile(item: any) {
confirmButtonText: t('common.confirm'),
cancelButtonText: t('common.cancel'),
type: 'warning',
center: true
center: true,
})
if (!result) return
let res = false
@@ -2867,7 +2867,7 @@ async function handleDeleteFile(item: any) {
region: configMap.bucketConfig.Location,
key: item.key,
DeleteHash: item.sha,
githubBranch: currentCustomDomain.value
githubBranch: currentCustomDomain.value,
}
if (item.isDir) {
message.info(t('pages.manage.bucket.deletingMsg'))
@@ -2879,7 +2879,7 @@ async function handleDeleteFile(item: any) {
message.success(t('pages.manage.bucket.deleteSuccess'))
currentPageFilesInfo.splice(
currentPageFilesInfo.findIndex((i: any) => i.key === item.key),
1
1,
)
if (!paging.value) {
const table = fileCacheDbInstance.table(currentPicBedName.value)
@@ -2889,7 +2889,7 @@ async function handleDeleteFile(item: any) {
.modify((l: any) => {
l.value.fullList.splice(
l.value.fullList.findIndex((i: any) => i.key === item.key),
1
1,
)
})
}
@@ -2918,7 +2918,7 @@ function singleRename() {
itemToBeRenamed.value.newName = customStrReplace(
itemToBeRenamed.value.fileName,
batchRenameMatch.value,
batchRenameReplace.value
batchRenameReplace.value,
)
} else {
itemToBeRenamed.value.newName =
@@ -2938,7 +2938,7 @@ function singleRename() {
region: configMap.bucketConfig.Location,
oldKey: item.key,
newKey: (item.key.slice(0, item.key.lastIndexOf('/') + 1) + itemToBeRenamed.value.newName).replaceAll('//', '/'),
customUrl: currentCustomDomain.value
customUrl: currentCustomDomain.value,
}
window.electron.triggerRPC<any>(IRPCActionType.MANAGE_RENAME_BUCKET_FILE, configMap.alias, param).then((res: any) => {
if (res) {
@@ -2957,7 +2957,7 @@ function singleRename() {
}
item.key = (item.key.slice(0, item.key.lastIndexOf('/') + 1) + itemToBeRenamed.value.newName).replaceAll(
'//',
'/'
'/',
)
item.url = `${currentCustomDomain.value}${currentPrefix.value}${itemToBeRenamed.value.newName}`
item.formatedTime = new Date().toLocaleString()
@@ -2979,7 +2979,7 @@ function singleRename() {
}
i.key = (i.key.slice(0, i.key.lastIndexOf('/') + 1) + itemToBeRenamed.value.newName).replaceAll(
'//',
'/'
'/',
)
i.url = `${currentCustomDomain.value}${currentPrefix.value}${itemToBeRenamed.value.newName}`
i.formatedTime = new Date().toLocaleString()
@@ -3002,7 +3002,7 @@ function handleGetS3Config(item: any) {
customUrl: currentCustomDomain.value,
expires: manageStore.config.settings.PreSignedExpire,
githubPrivate: configMap.bucketConfig.private,
rawUrl: item.url
rawUrl: item.url,
}
}
@@ -3015,7 +3015,7 @@ async function getPreSignedUrl(item: any) {
customUrl: currentCustomDomain.value,
expires: manageStore.config.settings.PreSignedExpire,
githubPrivate: configMap.bucketConfig.private,
rawUrl: item.url
rawUrl: item.url,
}
return await window.electron.triggerRPC<any>(IRPCActionType.MANAGE_GET_PRE_SIGNED_URL, configMap.alias, param)
}
@@ -3056,7 +3056,7 @@ function toggleCopyDropdown(index: number, event?: MouseEvent) {
x: rect.left,
y: rect.top,
width: rect.width,
height: rect.height
height: rect.height,
} as any)
}
}
@@ -3082,7 +3082,7 @@ function getDropdownStyle(index: number) {
maxHeight: '240px',
zIndex: 4000,
minWidth: '140px',
maxWidth: '200px'
maxWidth: '200px',
}
}

84
src/renderer/manage/pages/LogInPage.vue
View File

@@ -198,7 +198,7 @@
</option>
<option
v-for="[key, value] in Object.entries(
supportedPicBedList[activeName].configOptions[option].selectOptions
supportedPicBedList[activeName].configOptions[option].selectOptions,
)"
:key="key"
:value="key"
@@ -294,7 +294,7 @@ import {
RefreshCwIcon,
RotateCcwIcon,
SaveIcon,
TrashIcon
TrashIcon,
} from 'lucide-vue-next'
import { computed, onMounted, reactive, ref } from 'vue'
import { useI18n } from 'vue-i18n'
@@ -341,8 +341,8 @@ const tabItems = computed(() => {
key: 'login',
name: t('pages.manage.login.savedConfigs'),
icon: null,
iconComponent: FolderIcon
}
iconComponent: FolderIcon,
},
]
Object.values(supportedPicBedList).forEach((item: any) => {
@@ -350,7 +350,7 @@ const tabItems = computed(() => {
key: item.icon,
name: item.name,
icon: item.icon,
iconComponent: null as any
iconComponent: null as any,
})
})
@@ -538,7 +538,7 @@ async function handleConfigChange(name: string) {
area: area?.[i] || '',
customUrl: customUrl?.[i] || '',
operator: operator?.[i] || '',
password: password?.[i] || ''
password: password?.[i] || '',
}
}
}
@@ -579,7 +579,7 @@ const handleConfigRemove = async (name: string) => {
type: 'warning',
confirmButtonText: t('common.confirm'),
cancelButtonText: t('common.cancel'),
center: true
center: true,
}).then(result => {
if (!result) return
try {
@@ -587,7 +587,7 @@ const handleConfigRemove = async (name: string) => {
notifyUser(t('pages.manage.login.deleteConfigSuccessMsg'), 'success')
manageStore.refreshConfig()
getAllConfigAliasArray()
} catch (error) {
} catch (_error) {
notifyUser(t('pages.manage.login.deleteConfigFailedMsg'), 'error')
}
})
@@ -603,7 +603,7 @@ const getAllConfigAliasArray = async () => {
allConfigAliasMap[index] = {
alias: value.alias,
config: value,
picBedName: value.picBedName
picBedName: value.picBedName,
}
})
}
@@ -626,8 +626,8 @@ const handleConfigClick = async (item: any) => {
alias,
config,
picBedName,
allPicBedConfigure: JSON.stringify(result)
}
allPicBedConfigure: JSON.stringify(result),
},
})
}
@@ -692,7 +692,7 @@ async function getCurrentConfigList() {
'smms',
'tcyun',
'upyun',
'webdavplist'
'webdavplist',
]
const filteredConfigList = pbList.flatMap(pb => {
@@ -704,7 +704,7 @@ async function getCurrentConfigList() {
if (autoImport) {
const autoImportPicBed = initArray(
(await getPicBedsConfig<string | string[]>('settings.autoImportPicBed')) || '',
[]
[],
)
await Promise.all(filteredConfigList.flatMap(config => transUpToManage(config, config.type, autoImportPicBed)))
if (Object.keys(importedNewConfig).length > 0) {
@@ -743,7 +743,7 @@ async function transUpToManage(config: IUploaderConfigListItem, picBedName: stri
const commonConfig = {
alias,
picBedName,
paging: true
paging: true,
}
const resultMap: IStringKeyMap = {}
switch (picBedName) {
@@ -751,7 +751,7 @@ async function transUpToManage(config: IUploaderConfigListItem, picBedName: stri
if (!config.token) return
Object.assign(resultMap, {
...commonConfig,
token: config.token
token: config.token,
})
break
case 'aliyun':
@@ -768,11 +768,11 @@ async function transUpToManage(config: IUploaderConfigListItem, picBedName: stri
config.customUrl
? {
[config.bucket]: {
customUrl: config.customUrl
}
customUrl: config.customUrl,
},
}
: {}
)
: {},
),
})
break
case 'qiniu':
@@ -785,7 +785,7 @@ async function transUpToManage(config: IUploaderConfigListItem, picBedName: stri
baseDir: '/',
isAutoCustomUrl: false,
transformedConfig: JSON.stringify({ [config.bucket]: config.url }),
itemsPerPage: 50
itemsPerPage: 50,
})
break
case 'tcyun':
@@ -802,12 +802,12 @@ async function transUpToManage(config: IUploaderConfigListItem, picBedName: stri
config.customUrl
? {
[config.bucket]: {
customUrl: config.customUrl
}
customUrl: config.customUrl,
},
}
: {}
: {},
),
itemsPerPage: 50
itemsPerPage: 50,
})
break
case 'github':
@@ -818,7 +818,7 @@ async function transUpToManage(config: IUploaderConfigListItem, picBedName: stri
githubUsername: config.repo.split('/')[0],
customUrl: '',
proxy: '',
itemsPerPage: 50
itemsPerPage: 50,
})
break
case 'upyun':
@@ -838,10 +838,10 @@ async function transUpToManage(config: IUploaderConfigListItem, picBedName: stri
baseDir: '/',
area: '',
operator: config.operator,
password: config.password
}
password: config.password,
},
}),
itemsPerPage: 50
itemsPerPage: 50,
})
break
case 'webdavplist':
@@ -864,9 +864,9 @@ async function transUpToManage(config: IUploaderConfigListItem, picBedName: stri
password: config.password,
baseDir: config.path || '/',
customUrl: config.customUrl || '',
area: ''
}
})
area: '',
},
}),
})
delete resultMap.paging
break
@@ -881,9 +881,9 @@ async function transUpToManage(config: IUploaderConfigListItem, picBedName: stri
local: {
customUrl: config.customUrl || '',
baseDir: config.path,
webPath: config.webpath || ''
}
})
webPath: config.webpath || '',
},
}),
})
delete resultMap.paging
break
@@ -915,9 +915,9 @@ async function transUpToManage(config: IUploaderConfigListItem, picBedName: stri
webPath: config.webPath || '',
customUrl: config.customUrl || '',
fileMode: config.fileMode || '0664',
dirMode: config.dirMode || '0775'
}
})
dirMode: config.dirMode || '0775',
},
}),
})
delete resultMap.paging
break
@@ -942,11 +942,11 @@ async function transUpToManage(config: IUploaderConfigListItem, picBedName: stri
config.urlPrefix
? {
[config.bucketName]: {
customUrl: config.urlPrefix
}
customUrl: config.urlPrefix,
},
}
: {}
)
: {},
),
})
break
case 'imgur':
@@ -955,7 +955,7 @@ async function transUpToManage(config: IUploaderConfigListItem, picBedName: stri
...commonConfig,
username: config.username,
accessToken: config.accessToken,
proxy: ''
proxy: '',
})
delete resultMap.paging
break

24
src/renderer/manage/pages/ManageMain.vue
View File

@@ -265,7 +265,7 @@ import {
HomeIcon,
PlusIcon,
SettingsIcon,
XIcon
XIcon,
} from 'lucide-vue-next'
import { computed, onBeforeMount, reactive, ref, watch } from 'vue'
import { useI18n } from 'vue-i18n'
@@ -354,7 +354,7 @@ watch(
await getBucketList()
}
},
{ deep: true }
{ deep: true },
)
watch(sidebarWidth, () => {}, { immediate: false })
@@ -370,7 +370,7 @@ const urlMap: IStringKeyMap = {
smms: 'https://smms.app',
tcyun: 'https://console.cloud.tencent.com/cos',
upyun: 'https://console.upyun.com',
webdavplist: 'https://baike.baidu.com/item/WebDAV/4610909'
webdavplist: 'https://baike.baidu.com/item/WebDAV/4610909',
}
const showNewIconList = ['aliyun', 'qiniu', 'tcyun', 's3plist']
@@ -390,7 +390,7 @@ const menuTitleMap: IStringKeyMap = {
imgur: galleryT,
github: repositoryT,
webdavplist: '',
local: ''
local: '',
}
const openPicBedUrl = () => window.electron.sendRPC(IRPCActionType.OPEN_URL, urlMap[currentPagePicBedConfig.picBedName])
@@ -477,7 +477,7 @@ function handleSelectMenu(bucketName: string) {
bucketConfig: bucketList.value[bucketName],
cdnUrl: currentPicBedConfig.customUrl,
baseDir: prefix,
webPath: currentPicBedConfig.webPath || ''
webPath: currentPicBedConfig.webPath || '',
}
currentSelectedBucket.value = bucketName
router.push({
@@ -487,15 +487,15 @@ function handleSelectMenu(bucketName: string) {
alias: currentAlias.value,
picBedName: currentPicBedName.value,
config: JSON.stringify(currentPagePicBedConfig),
allPicBedConfigure: JSON.stringify(allPicBedConfigure)
}
allPicBedConfigure: JSON.stringify(allPicBedConfigure),
},
})
}
function switchPicBed(picBedAlias: string) {
if (picBedAlias === 'main') {
router.push({
path: '/main-page/manage-login-page'
path: '/main-page/manage-login-page',
})
return
}
@@ -510,8 +510,8 @@ function switchPicBed(picBedAlias: string) {
alias: picBedAlias,
picBedName: allPicBedConfigure[picBedAlias].picBedName,
config: JSON.stringify(allPicBedConfigure[picBedAlias]),
allPicBedConfigure: JSON.stringify(allPicBedConfigure)
}
allPicBedConfigure: JSON.stringify(allPicBedConfigure),
},
})
} else {
currentAlias.value = picBedAlias
@@ -534,8 +534,8 @@ function openBucketPageSetting() {
alias: currentAlias.value,
picBedName: currentPicBedName.value,
config: JSON.stringify(currentPagePicBedConfig),
allPicBedConfigure: JSON.stringify(allPicBedConfigure)
}
allPicBedConfigure: JSON.stringify(allPicBedConfigure),
},
})
}

38
src/renderer/manage/pages/ManageSetting.vue
View File

@@ -11,7 +11,7 @@
{{
t('pages.manage.setting.clearCache', {
percent: dbSizeAvailableRate,
size: formatFileSize(dbSize) || 0
size: formatFileSize(dbSize) || 0,
})
}}
</button>
@@ -249,7 +249,7 @@ const form = ref<IStringKeyMap>({
customPasteFormat: '$url',
PreSignedExpire: 14400, // seconds
maxDownloadFileCount: 5,
customRenameFormat: '{filename}'
customRenameFormat: '{filename}',
})
const settingsKeys = Object.keys(form.value)
@@ -262,7 +262,7 @@ const pasteFormatList = ['markdown', 'markdown-with-link', 'rawurl', 'html', 'bb
settingsKeys.forEach(key => {
watch(
() => form.value[key],
newValue => saveConfig({ [`settings.${key}`]: newValue })
newValue => saveConfig({ [`settings.${key}`]: newValue }),
)
})
@@ -276,7 +276,7 @@ const switchFieldsList = [
'isIgnoreCase',
'timestampRename',
'randomStringRename',
'customRename'
'customRename',
]
const switchFieldsNoTipsList = ['isShowThumbnail', 'isUsePreSignedUrl']
const switchFieldsHasActiveTextList = [] as string[]
@@ -286,12 +286,12 @@ const switchFieldsConfigList = switchFieldsList.map(item => ({
segments: [
{
text: t(`pages.manage.setting.${item}Title` as any),
style: 'color: var(--color-text-primary);'
}
style: 'color: var(--color-text-primary);',
},
],
tooltip: switchFieldsNoTipsList.includes(item) ? undefined : t(`pages.manage.setting.${item}Tips` as any),
activeText: switchFieldsHasActiveTextList.includes(item) ? t(`pages.manage.setting.${item}On` as any) : undefined,
inactiveText: switchFieldsHasActiveTextList.includes(item) ? t(`pages.manage.setting.${item}Off` as any) : undefined
inactiveText: switchFieldsHasActiveTextList.includes(item) ? t(`pages.manage.setting.${item}Off` as any) : undefined,
}))
const switchFieldsSpecialList = [
@@ -300,37 +300,37 @@ const switchFieldsSpecialList = [
segments: [
{
text: t('pages.manage.setting.download'),
style: 'color: var(--color-text-primary);'
style: 'color: var(--color-text-primary);',
},
{
text: t('pages.manage.setting.file'),
style: 'color: orange;'
style: 'color: orange;',
},
{
text: t('pages.manage.setting.keepDirStructure'),
style: 'color: var(--color-text-primary);'
}
style: 'color: var(--color-text-primary);',
},
],
tooltip: t('pages.manage.setting.keepDirStructureDesc')
tooltip: t('pages.manage.setting.keepDirStructureDesc'),
},
{
configName: 'isDownloadFolderKeepDirStructure',
segments: [
{
text: t('pages.manage.setting.download'),
style: 'color: var(--color-text-primary);'
style: 'color: var(--color-text-primary);',
},
{
text: t('pages.manage.setting.folder'),
style: 'color: orange;'
style: 'color: orange;',
},
{
text: t('pages.manage.setting.keepDirStructure'),
style: 'color: var(--color-text-primary);'
}
style: 'color: var(--color-text-primary);',
},
],
tooltip: t('pages.manage.setting.keepDirStructureDesc')
}
tooltip: t('pages.manage.setting.keepDirStructureDesc'),
},
]
async function initData() {
@@ -359,7 +359,7 @@ function handleConfirmClearDb() {
type: 'warning',
confirmButtonText: t('common.confirm'),
cancelButtonText: t('common.cancel'),
center: true
center: true,
}).then(result => {
if (result) {
confirmClearDb()

620
src/renderer/manage/pages/css/BucketPage.css
View File

File diff suppressed because it is too large Load Diff

255
src/renderer/manage/pages/css/LoginPage.css
View File

@@ -1,38 +1,38 @@
/* Container */
.login-container {
display: flex;
overflow-y: auto;
margin: 0;
padding: 1rem;
width: 100%;
margin: 0;
display: flex;
min-height: 100vh;
flex-direction: column;
gap: 1.25rem;
min-height: 100vh;
box-sizing: border-box;
overflow-y: auto;
}
/* Card Base */
.login-card {
background: var(--color-surface);
overflow: hidden;
border: 1px solid var(--color-border-secondary);
border-radius: var(--radius-xl);
overflow: hidden;
transition: var(--transition-medium);
background: var(--color-surface);
box-shadow: var(--shadow-sm);
transition: var(--transition-medium);
}
.login-card:hover {
box-shadow: var(--shadow-md);
border-color: var(--color-border);
box-shadow: var(--shadow-md);
}
/* Header Card */
.header-card .card-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 1.5rem;
align-items: center;
border-bottom: 1px solid var(--color-border-secondary);
padding: 1rem 1.5rem;
flex-wrap: wrap;
gap: 1rem;
}
@@ -45,23 +45,23 @@
}
.header-icon {
color: var(--color-blue-common);
display: flex;
align-items: center;
color: var(--color-blue-common);
}
.header-content h1 {
margin: 0;
font-size: 1.5rem;
font-weight: 600;
color: var(--color-text-primary);
margin: 0;
letter-spacing: -0.025em;
}
.header-content p {
margin: 0;
font-size: 0.875rem;
color: var(--color-text-secondary);
margin: 0;
}
.header-actions {
@@ -75,25 +75,25 @@
.action-button {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-surface-elevated);
color: var(--color-text-primary);
padding: 0.5rem 1rem;
font-size: 0.875rem;
font-weight: 500;
text-decoration: none;
transition: var(--transition-fast);
cursor: pointer;
white-space: nowrap;
color: var(--color-text-primary);
background: var(--color-surface-elevated);
transition: var(--transition-fast);
gap: 0.5rem;
cursor: pointer;
}
.action-button:hover {
background: var(--color-background-secondary);
border-color: var(--color-border-darker);
transform: translateY(-1px);
background: var(--color-background-secondary);
box-shadow: var(--shadow-sm);
transform: translateY(-1px);
}
.action-button:active {
@@ -102,30 +102,30 @@
}
.action-button.primary {
background: var(--color-blue-common);
color: white;
border-color: var(--color-blue-common);
color: white;
background: var(--color-blue-common);
}
.action-button.primary:hover {
background: var(--color-accent);
border-color: var(--color-accent);
background: var(--color-accent);
}
.action-button.secondary {
background: var(--color-background-secondary);
color: var(--color-text-secondary);
background: var(--color-background-secondary);
}
.action-button.danger {
background: var(--color-danger);
color: white;
border-color: var(--color-danger);
color: white;
background: var(--color-danger);
}
.action-button.danger:hover {
background: var(--color-danger);
border-color: var(--color-danger);
background: var(--color-danger);
}
/* Tabs */
@@ -134,8 +134,8 @@
}
.tabs-container {
padding: 0.75rem 1rem;
overflow: hidden;
padding: 0.75rem 1rem;
}
.tabs-nav-wrapper {
@@ -146,41 +146,41 @@
.tabs-nav {
display: flex;
align-items: center;
width: 100%;
flex-wrap: wrap;
gap: 0.5rem;
width: 100%;
align-items: center;
}
.tab-button {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
border: 1px solid var(--color-border-secondary);
border-radius: var(--radius-md);
background: var( --color-surface-elevated);
color: var(--color-text-secondary);
padding: 0.5rem 1rem;
min-width: fit-content;
font-size: 0.875rem;
font-weight: 500;
text-decoration: none;
transition: var(--transition-fast);
cursor: pointer;
white-space: nowrap;
min-width: fit-content;
color: var(--color-text-secondary);
background: var( --color-surface-elevated);
transition: var(--transition-fast);
gap: 0.5rem;
cursor: pointer;
flex: 0 0 auto;
}
.tab-button:hover {
background: var(--color-surface-elevated);
border-color: var(--color-border);
color: var(--color-text-primary);
background: var(--color-surface-elevated);
}
.tab-button.active {
background: var(--color-primary);
color: white;
border-color: var(--color-primary);
color: white;
background: var(--color-primary);
}
.tab-icon {
@@ -205,21 +205,21 @@
}
.empty-state {
text-align: center;
padding: 3rem 1rem;
text-align: center;
color: var(--color-text-secondary);
}
.empty-icon {
color: var(--color-text-tertiary);
margin-bottom: 1rem;
color: var(--color-text-tertiary);
}
.empty-state h3 {
margin: 0 0 0.5rem 0;
color: var(--color-text-primary);
margin: 0 0 0.5rem;
font-size: 1.25rem;
font-weight: 600;
color: var(--color-text-primary);
}
.empty-state p {
@@ -234,10 +234,10 @@
}
.config-item {
background: var( --color-surface-elevated);
border: 1px solid var(--color-border-secondary);
border-radius: var(--radius-lg);
padding: 1.25rem;
background: var( --color-surface-elevated);
transition: var(--transition-medium);
}
@@ -264,7 +264,7 @@
}
.config-alias {
margin: 0 0 0.25rem 0;
margin: 0 0 0.25rem;
font-size: 1rem;
font-weight: 600;
color: var(--color-text-primary);
@@ -283,20 +283,20 @@
.details-button {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem;
border: none;
border-radius: var(--radius-md);
background: var(--color-surface-elevated);
color: var(--color-text-secondary);
padding: 0.5rem;
font-size: 0.875rem;
cursor: pointer;
color: var(--color-text-secondary);
background: var(--color-surface-elevated);
transition: var(--transition-fast);
gap: 0.5rem;
cursor: pointer;
}
.details-button:hover {
background: var(--color-background-secondary);
color: var(--color-text-primary);
background: var(--color-background-secondary);
}
.details-button .rotated {
@@ -304,10 +304,10 @@
}
.config-table {
overflow: hidden;
margin-top: 0.75rem;
border: 1px solid var(--color-border-secondary);
border-radius: var(--radius-md);
overflow: hidden;
}
.table-row {
@@ -332,10 +332,10 @@
}
.table-key {
background: var(--color-background-secondary);
color: var(--color-text-secondary);
font-weight: 500;
width: 120px;
font-weight: 500;
color: var(--color-text-secondary);
background: var(--color-background-secondary);
flex-shrink: 0;
}
@@ -356,8 +356,8 @@
}
.picbed-config {
max-width: 800px;
margin: 0 auto;
max-width: 800px;
}
.info-section {
@@ -367,22 +367,22 @@
.info-card {
display: flex;
align-items: flex-start;
gap: 1rem;
padding: 1rem;
border-radius: var(--radius-md);
margin-bottom: 1rem;
border-radius: var(--radius-md);
padding: 1rem;
gap: 1rem;
}
.info-card.primary {
background: rgba(99, 102, 241, 0.1);
border: 1px solid rgba(99, 102, 241, 0.2);
border: 1px solid rgb(99 102 241 / 20%);
color: var(--color-primary);
background: rgb(99 102 241 / 10%);
}
.info-card.reference {
background: rgba(107, 114, 128, 0.1);
border: 1px solid rgba(107, 114, 128, 0.2);
border: 1px solid rgb(107 114 128 / 20%);
color: var(--color-text-secondary);
background: rgb(107 114 128 / 10%);
}
.info-card p {
@@ -392,13 +392,13 @@
}
.link-button {
color: var(--color-primary);
text-decoration: underline;
background: none;
border: none;
cursor: pointer;
font-size: inherit;
padding: 0;
font-size: inherit;
text-decoration: underline;
color: var(--color-primary);
background: none;
cursor: pointer;
}
.link-button:hover {
@@ -417,54 +417,54 @@
.form-label {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.5rem;
font-size: 0.875rem;
font-weight: 500;
color: var(--color-text-primary);
margin-bottom: 0.5rem;
gap: 0.5rem;
}
.tooltip-button {
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
align-items: center;
border: none;
border-radius: 50%;
background: var(--color-background-secondary);
width: 20px;
height: 20px;
color: var(--color-text-tertiary);
cursor: help;
background: var(--color-background-secondary);
transition: var(--transition-fast);
cursor: help;
}
.tooltip-button:hover {
background: var(--color-border);
color: var(--color-text-secondary);
background: var(--color-border);
}
.form-input,
.form-select {
width: 100%;
padding: 0.75rem;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-background-primary);
color: var(--color-text-primary);
padding: 0.75rem;
width: 100%;
font-size: 0.875rem;
color: var(--color-text-primary);
background: var(--color-background-primary);
transition: var(--transition-fast);
}
.form-input:focus,
.form-select:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
outline: none;
box-shadow: 0 0 0 3px rgb(99 102 241 / 10%);
}
.form-input:disabled {
background: var(--color-background-secondary);
color: var(--color-text-tertiary);
background: var(--color-background-secondary);
cursor: not-allowed;
}
@@ -477,40 +477,37 @@
}
.custom-switch input {
opacity: 0;
width: 0;
height: 0;
opacity: 0;
}
.switch-slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
inset: 0;
border-radius: 24px;
background-color: var(--color-border);
transition: var(--transition-fast);
border-radius: 24px;
cursor: pointer;
}
.switch-slider:before {
.switch-slider::before {
position: absolute;
content: "";
height: 18px;
width: 18px;
left: 3px;
bottom: 3px;
left: 3px;
border-radius: 50%;
width: 18px;
height: 18px;
background-color: white;
transition: var(--transition-fast);
border-radius: 50%;
content: "";
}
input:checked + .switch-slider {
background-color: var(--color-success);
}
input:checked + .switch-slider:before {
input:checked + .switch-slider::before {
transform: translateX(24px);
}
@@ -546,29 +543,29 @@ input:checked + .switch-slider:before {
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: var(--color-surface-elevated);
left: 0;
z-index: 50;
overflow-y: auto;
margin-top: 0.25rem;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
z-index: 50;
margin-top: 0.25rem;
max-height: 200px;
overflow-y: auto;
background: var(--color-surface-elevated);
box-shadow: var(--shadow-lg);
}
.dropdown-item {
display: block;
width: 100%;
padding: 0.75rem;
border: none;
background: none;
color: var(--color-text-primary);
padding: 0.75rem;
width: 100%;
font-size: 0.875rem;
text-align: left;
cursor: pointer;
color: var(--color-text-primary);
background: none;
transition: var(--transition-fast);
cursor: pointer;
}
.dropdown-item:hover {
@@ -581,7 +578,7 @@ input:checked + .switch-slider:before {
}
.config-table-section h3 {
margin: 0 0 1rem 0;
margin: 0 0 1rem;
font-size: 1.125rem;
font-weight: 600;
color: var(--color-text-primary);
@@ -600,20 +597,20 @@ input:checked + .switch-slider:before {
}
.config-table th {
background: var(--color-background-secondary);
color: var(--color-text-secondary);
font-weight: 500;
padding: 0.75rem;
text-align: center;
border-bottom: 1px solid var(--color-border-secondary);
padding: 0.75rem;
font-weight: 500;
text-align: center;
color: var(--color-text-secondary);
background: var(--color-background-secondary);
}
.config-table td {
border-bottom: 1px solid var(--color-border-secondary);
padding: 0.75rem;
text-align: center;
border-bottom: 1px solid var(--color-border-secondary);
cursor: pointer;
transition: var(--transition-fast);
cursor: pointer;
}
.config-table td:hover {
@@ -625,22 +622,22 @@ input:checked + .switch-slider:before {
}
/* Responsive */
@media (max-width: 768px) {
@media (width <= 768px) {
.login-container {
padding: 0.75rem;
gap: 1rem;
}
.header-card .card-header {
align-items: flex-start;
padding: 0.75rem 1rem;
flex-direction: column;
align-items: flex-start;
gap: 0.75rem;
}
.header-actions {
width: 100%;
justify-content: flex-end;
width: 100%;
}
.tabs-container {
@@ -653,8 +650,8 @@ input:checked + .switch-slider:before {
.tab-button {
padding: 0.5rem 0.75rem;
font-size: 0.8rem;
max-width: 150px;
font-size: 0.8rem;
}
.tab-icon {
@@ -672,8 +669,8 @@ input:checked + .switch-slider:before {
}
.main-actions {
width: 100%;
justify-content: stretch;
width: 100%;
}
.main-actions .action-button {
@@ -681,7 +678,7 @@ input:checked + .switch-slider:before {
}
}
@media (max-width: 480px) {
@media (width <= 480px) {
.login-container {
padding: 0.5rem;
}
@@ -692,8 +689,8 @@ input:checked + .switch-slider:before {
.tab-button {
padding: 0.375rem 0.5rem;
font-size: 0.75rem;
max-width: 120px;
font-size: 0.75rem;
}
.tab-button span {
@@ -723,18 +720,18 @@ input:checked + .switch-slider:before {
}
.required-marker {
color: var(--color-error);
margin-left: 0.25rem;
font-size: 1rem;
font-weight: 600;
color: var(--color-error);
}
.error-message {
color: var(--color-error);
font-size: 0.75rem;
margin-top: 0.25rem;
display: flex;
align-items: center;
margin-top: 0.25rem;
font-size: 0.75rem;
color: var(--color-error);
gap: 0.25rem;
}

269
src/renderer/manage/pages/css/ManageMain.css
View File

@@ -1,16 +1,16 @@
/* ManageMain Page Styles */
.manage-container {
height: 97%;
display: flex;
flex-direction: column;
padding: 0.75rem;
height: 97%;
flex-direction: column;
}
.manage-card {
background: var(--color-background-secondary);
border-radius: var(--radius-lg);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-background-secondary);
box-shadow: var(--shadow-sm);
}
@@ -32,11 +32,11 @@
}
.header-icon {
display: flex;
justify-content: center;
align-items: center;
width: 68px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
}
.header-icon-img {
@@ -46,16 +46,16 @@
}
.header-text .header-title {
margin: 0 0 0.01rem;
font-size: 1.25rem;
font-weight: 600;
color: var(--color-text-primary);
margin: 0 0 0.01rem 0;
}
.header-text .header-subtitle {
margin: 0;
font-size: 0.875rem;
color: var(--color-text-secondary);
margin: 0;
}
.header-actions {
@@ -75,25 +75,25 @@
}
.sidebar {
display: flex;
border-right: 1px solid var(--color-border);
min-width: 120px;
max-width: 400px;
background: var(--color-surface-secondary);
border-right: 1px solid var(--color-border);
display: flex;
flex-direction: column;
min-height: 0; /* Fix for flex overflow */
background: var(--color-surface-secondary);
transition: width 0.1s ease-out;
flex-direction: column;
}
.resize-handle {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 4px;
background: transparent;
cursor: col-resize;
position: relative;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.resize-handle:hover {
@@ -105,25 +105,25 @@
}
.resize-line {
border-radius: 1px;
width: 2px;
height: 40px;
background: var(--color-accent);
border-radius: 1px;
opacity: 0;
transition: opacity 0.2s ease;
}
.sidebar-header {
padding: 1rem;
border-bottom: 1px solid var(--color-border);
padding: 1rem;
flex-shrink: 0;
}
.sidebar-title {
margin: 0;
font-size: 1rem;
font-weight: 600;
color: var(--color-text-primary);
margin: 0;
}
.sidebar-content {
@@ -135,19 +135,19 @@
.loading-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
align-items: center;
padding: 2rem;
flex-direction: column;
gap: 0.5rem;
}
.loading-spinner {
width: 20px;
height: 20px;
border: 2px solid var(--color-border);
border-top: 2px solid var(--color-accent);
border-radius: 50%;
width: 20px;
height: 20px;
animation: spin 1s linear infinite;
}
@@ -155,6 +155,7 @@
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
@@ -174,12 +175,12 @@
.menu-item {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem;
border-radius: var(--radius-md);
cursor: pointer;
transition: var(--transition-fast);
padding: 0.75rem;
font-size: 0.875rem;
transition: var(--transition-fast);
gap: 0.75rem;
cursor: pointer;
}
.menu-item:hover {
@@ -187,8 +188,8 @@
}
.menu-item.active {
background: var(--color-accent);
color: white;
background: var(--color-accent);
}
.menu-item.active .menu-icon {
@@ -207,12 +208,12 @@
}
.menu-text {
overflow: hidden;
min-width: 0;
font-weight: 500;
line-height: 1.2;
word-break: break-word;
overflow: hidden;
flex: 1;
min-width: 0;
}
.sidebar-footer {
@@ -230,17 +231,17 @@
.footer-action-item {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem;
border-radius: var(--radius-md);
cursor: pointer;
transition: var(--transition-fast);
font-size: 0.875rem;
background: none;
border: none;
color: var(--color-text-primary);
text-align: left;
border-radius: var(--radius-md);
padding: 0.75rem;
width: 100%;
font-size: 0.875rem;
text-align: left;
color: var(--color-text-primary);
background: none;
transition: var(--transition-fast);
gap: 0.75rem;
cursor: pointer;
}
.footer-action-item:hover {
@@ -259,29 +260,29 @@
}
.content-area {
flex: 1;
padding: 1.5rem;
overflow-y: auto;
padding: 1.5rem;
min-height: 0;
flex: 1;
}
.action-button {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
border: none;
border-radius: var(--radius-lg);
padding: 0.75rem 1.5rem;
font-size: 0.875rem;
font-weight: 500;
cursor: pointer;
transition: var(--transition-fast);
font-family: inherit;
font-weight: 500;
transition: var(--transition-fast);
gap: 0.5rem;
cursor: pointer;
}
.action-button.primary {
background: var(--color-accent);
color: white;
background: var(--color-accent);
}
.action-button.primary:hover {
@@ -291,15 +292,15 @@
}
.action-button.secondary {
background: var(--color-surface-elevated);
color: var(--color-text-primary);
border: 1px solid var(--color-border);
color: var(--color-text-primary);
background: var(--color-surface-elevated);
}
.action-button.secondary:hover {
background: var(--color-surface);
border-color: var(--color-accent);
color: var(--color-accent);
background: var(--color-surface);
}
.button-icon {
@@ -310,60 +311,57 @@
/* Dialog styles */
.dialog-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
inset: 0;
z-index: 2000;
display: flex;
justify-content: center;
align-items: center;
background: rgb(0 0 0 / 50%);
}
.dialog-container {
background: var(--color-surface);
border-radius: var(--radius-lg);
border: 1px solid var(--color-border);
box-shadow: var(--shadow-xl);
max-width: 600px;
width: 90%;
max-height: 80vh;
overflow: hidden;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
width: 90%;
max-width: 600px;
max-height: 80vh;
background: var(--color-surface);
box-shadow: var(--shadow-xl);
}
.dialog-header {
padding: 1.5rem 1.5rem 0;
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.5rem 1.5rem 0;
}
.dialog-title {
margin: 0;
font-size: 1.25rem;
font-weight: 600;
color: var(--color-text-primary);
margin: 0;
}
.dialog-close {
background: none;
display: flex;
justify-content: center;
align-items: center;
border: none;
color: var(--color-text-secondary);
cursor: pointer;
border-radius: var(--radius-sm);
padding: 0.25rem;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-sm);
color: var(--color-text-secondary);
background: none;
transition: var(--transition-fast);
cursor: pointer;
}
.dialog-close:hover {
background: var(--color-surface-elevated);
color: var(--color-text-primary);
background: var(--color-surface-elevated);
}
.close-icon {
@@ -382,16 +380,16 @@
}
.picbed-card {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
padding: 1.5rem;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
cursor: pointer;
transition: var(--transition-fast);
position: relative;
padding: 1.5rem;
background: var(--color-surface-elevated);
transition: var(--transition-fast);
flex-direction: column;
cursor: pointer;
}
.picbed-card:hover {
@@ -402,7 +400,7 @@
.picbed-card.active {
border-color: var(--color-accent);
background-color: rgba(64, 158, 255, 0.1);
background-color: rgb(64 158 255 / 10%);
}
.picbed-card.main-card {
@@ -411,16 +409,16 @@
.picbed-card.main-card:hover {
border-color: var(--color-error);
background-color: rgba(255, 59, 48, 0.1);
background-color: rgb(255 59 48 / 10%);
}
.card-icon {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 0.75rem;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 0.75rem;
}
.picbed-icon {
@@ -461,59 +459,56 @@
/* Drawer styles */
.drawer-overlay {
position: fixed;
top: 32px;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: flex-end;
inset: 32px 0 0;
z-index: 2000;
display: flex;
justify-content: flex-end;
align-items: center;
background: rgb(0 0 0 / 50%);
}
.drawer-container {
background: var(--color-surface);
height: 100vh;
overflow-y: auto;
width: 400px;
max-width: 90vw;
overflow-y: auto;
height: 100vh;
background: var(--color-surface);
box-shadow: var(--shadow-xl);
}
.drawer-header {
padding: 1.5rem;
border-bottom: 1px solid var(--color-border);
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid var(--color-border);
padding: 1.5rem;
}
.drawer-title {
margin: 0;
font-size: 1.25rem;
font-weight: 600;
color: var(--color-text-primary);
margin: 0;
}
.drawer-close {
background: none;
display: flex;
justify-content: center;
align-items: center;
border: none;
color: var(--color-text-secondary);
cursor: pointer;
border-radius: var(--radius-sm);
padding: 0.25rem;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-sm);
color: var(--color-text-secondary);
background: none;
transition: var(--transition-fast);
cursor: pointer;
}
.drawer-close:hover {
background: var(--color-surface-elevated);
color: var(--color-text-primary);
background: var(--color-surface-elevated);
}
.drawer-content {
@@ -527,11 +522,11 @@
}
.form-icon {
display: flex;
justify-content: center;
align-items: center;
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
}
.picbed-form-icon {
@@ -541,9 +536,9 @@
}
.form-divider {
margin: 1.5rem 0;
height: 1px;
background: var(--color-border);
margin: 1.5rem 0;
}
.form-group {
@@ -559,21 +554,21 @@
}
.form-input {
width: 100%;
padding: 0.75rem;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-surface-elevated);
color: var(--color-text-primary);
padding: 0.75rem;
width: 100%;
font-size: 0.875rem;
color: var(--color-text-primary);
background: var(--color-surface-elevated);
transition: var(--transition-fast);
box-sizing: border-box;
}
.form-input:focus {
outline: none;
border-color: var(--color-accent);
box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.2);
outline: none;
box-shadow: 0 0 0 2px rgb(0 122 255 / 20%);
}
.input-group {
@@ -587,14 +582,14 @@
}
.input-append {
padding: 0.75rem;
background: var(--color-background-secondary);
border: 1px solid var(--color-border);
border-left: none;
border-top-right-radius: var(--radius-md);
border-bottom-right-radius: var(--radius-md);
padding: 0.75rem;
font-size: 0.875rem;
color: var(--color-text-secondary);
background: var(--color-background-secondary);
border-top-right-radius: var(--radius-md);
border-bottom-right-radius: var(--radius-md);
}
.select-wrapper {
@@ -602,32 +597,32 @@
}
.form-select {
width: 100%;
padding: 0.75rem 2.5rem 0.75rem 0.75rem;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-surface-elevated);
color: var(--color-text-primary);
padding: 0.75rem 2.5rem 0.75rem 0.75rem;
width: 100%;
font-size: 0.875rem;
color: var(--color-text-primary);
background: var(--color-surface-elevated);
transition: var(--transition-fast);
appearance: none;
cursor: pointer;
transition: var(--transition-fast);
}
.form-select:focus {
outline: none;
border-color: var(--color-accent);
box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.2);
outline: none;
box-shadow: 0 0 0 2px rgb(0 122 255 / 20%);
}
.select-arrow {
position: absolute;
right: 0.75rem;
top: 50%;
transform: translateY(-50%);
right: 0.75rem;
width: 16px;
height: 16px;
color: var(--color-text-secondary);
transform: translateY(-50%);
pointer-events: none;
}
@@ -645,10 +640,10 @@
.switch-slider {
position: relative;
border-radius: 0.75rem;
width: 3rem;
height: 1.5rem;
background: var(--color-border);
border-radius: 0.75rem;
transition: var(--transition-fast);
}
@@ -656,12 +651,12 @@
position: absolute;
top: 2px;
left: 2px;
border-radius: 50%;
width: 1.25rem;
height: 1.25rem;
background: white;
border-radius: 50%;
transition: var(--transition-fast);
box-shadow: var(--shadow-sm);
transition: var(--transition-fast);
}
.switch-input:checked + .switch-slider {
@@ -674,7 +669,7 @@
.form-actions {
display: flex;
gap: 1rem;
margin-top: 2rem;
justify-content: flex-end;
margin-top: 2rem;
gap: 1rem;
}

183
src/renderer/manage/pages/css/ManageSetting.css
View File

@@ -1,38 +1,38 @@
/* Container */
.manage-setting-container {
display: flex;
overflow-y: auto;
margin: 0;
padding: 1rem;
width: 100%;
margin: 0;
display: flex;
min-height: 100vh;
flex-direction: column;
gap: 1rem;
min-height: 100vh;
box-sizing: border-box;
overflow-y: auto;
}
/* Card Base */
.setting-card {
background: var(--color-surface);
overflow: hidden;
border: 1px solid var(--color-border-secondary);
border-radius: var(--radius-xl);
overflow: hidden;
transition: var(--transition-medium);
background: var(--color-surface);
box-shadow: var(--shadow-sm);
transition: var(--transition-medium);
}
.setting-card:hover {
box-shadow: var(--shadow-md);
border-color: var(--color-border);
box-shadow: var(--shadow-md);
}
/* Header Card */
.header-card .card-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 1.5rem;
align-items: center;
border-bottom: 1px solid var(--color-border-secondary);
padding: 1rem 1.5rem;
flex-wrap: wrap;
gap: 1rem;
}
@@ -45,23 +45,23 @@
}
.header-icon {
color: var(--color-blue-common);
display: flex;
align-items: center;
color: var(--color-blue-common);
}
.header-content h1 {
margin: 0;
font-size: 1.5rem;
font-weight: 600;
color: var(--color-text-primary);
margin: 0;
letter-spacing: -0.025em;
}
.header-content p {
margin: 0;
font-size: 0.875rem;
color: var(--color-text-secondary);
margin: 0;
}
.header-actions {
@@ -75,25 +75,25 @@
.action-button {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-surface-elevated);
color: var(--color-text-primary);
padding: 0.5rem 1rem;
font-size: 0.875rem;
font-weight: 500;
text-decoration: none;
transition: var(--transition-fast);
cursor: pointer;
white-space: nowrap;
color: var(--color-text-primary);
background: var(--color-surface-elevated);
transition: var(--transition-fast);
gap: 0.5rem;
cursor: pointer;
}
.action-button:hover {
background: var(--color-background-secondary);
border-color: var(--color-border-darker);
transform: translateY(-1px);
background: var(--color-background-secondary);
box-shadow: var(--shadow-sm);
transform: translateY(-1px);
}
.action-button:active {
@@ -102,30 +102,30 @@
}
.action-button.primary {
background: var(--color-blue-common);
color: white;
border-color: var(--color-blue-common);
color: white;
background: var(--color-blue-common);
}
.action-button.primary:hover {
background: var(--color-accent);
border-color: var(--color-accent);
background: var(--color-accent);
}
.action-button.secondary {
background: var(--color-background-secondary);
color: var(--color-text-secondary);
background: var(--color-background-secondary);
}
.action-button.warning {
background: var(--color-warning);
color: white;
border-color: var(--color-warning);
color: white;
background: var(--color-warning);
}
.action-button.warning:hover {
background: var(--color-warning);
border-color: var(--color-warning);
background: var(--color-warning);
opacity: 0.9;
}
@@ -152,8 +152,8 @@
.setting-section + .setting-section {
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid var(--color-border-secondary);
padding-top: 1rem;
}
/* Form Groups */
@@ -182,25 +182,25 @@
}
.form-input {
width: 100%;
padding: 0.75rem;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-surface-elevated);
color: var(--color-text-primary);
padding: 0.75rem;
width: 100%;
font-size: 0.875rem;
color: var(--color-text-primary);
background: var(--color-surface-elevated);
transition: var(--transition-fast);
}
.form-input:focus {
outline: none;
border-color: var(--color-accent);
box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.2);
outline: none;
box-shadow: 0 0 0 2px rgb(0 122 255 / 20%);
}
.form-input:disabled {
background: var(--color-background-secondary);
color: var(--color-text-tertiary);
background: var(--color-background-secondary);
cursor: not-allowed;
}
@@ -211,10 +211,10 @@
/* Cache Info */
.cache-info {
display: flex;
gap: 1rem;
margin-top: 0.5rem;
font-size: 0.75rem;
color: var(--color-text-secondary);
margin-top: 0.5rem;
gap: 1rem;
}
.cache-size {
@@ -227,16 +227,16 @@
}
.section-title {
margin: 0;
font-size: 1rem;
font-weight: 500;
color: var(--color-accent);
margin: 0;
}
/* Pattern Table */
.pattern-table-container {
margin-top: 0.75rem;
overflow-x: auto;
margin-top: 0.75rem;
}
.pattern-table {
@@ -246,19 +246,19 @@
}
.pattern-table th {
background: var(--color-background-secondary);
padding: 0.5rem;
border: 1px solid var(--color-border);
padding: 0.5rem;
font-weight: 500;
color: var(--color-text-primary);
text-align: center;
color: var(--color-text-primary);
background: var(--color-background-secondary);
}
.pattern-table td {
padding: 0.5rem;
border: 1px solid var(--color-border);
color: var(--color-text-secondary);
padding: 0.5rem;
text-align: center;
color: var(--color-text-secondary);
}
.pattern-table td.clickable {
@@ -281,13 +281,13 @@
.radio-option {
display: flex;
align-items: center;
gap: 0.75rem;
cursor: pointer;
padding: 0.625rem;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
transition: var(--transition-fast);
padding: 0.625rem;
background: var(--color-surface-elevated);
transition: var(--transition-fast);
gap: 0.75rem;
cursor: pointer;
}
.radio-option:hover {
@@ -303,26 +303,26 @@
.radio-custom {
position: relative;
width: 1.25rem;
height: 1.25rem;
border: 2px solid var(--color-border);
border-radius: 50%;
width: 1.25rem;
height: 1.25rem;
background: var(--color-surface-elevated);
transition: var(--transition-fast);
flex-shrink: 0;
}
.radio-custom::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
border-radius: 50%;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--color-accent);
transform: translate(-50%, -50%) scale(0);
transition: var(--transition-fast);
content: '';
transform: translate(-50%, -50%) scale(0);
}
.radio-input:checked + .radio-custom {
@@ -353,17 +353,17 @@
.input-append-button {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1rem;
background: var(--color-accent);
color: white;
border: none;
border-top-right-radius: var(--radius-md);
border-bottom-right-radius: var(--radius-md);
padding: 0.75rem 1rem;
font-size: 0.875rem;
font-weight: 500;
cursor: pointer;
color: white;
background: var(--color-accent);
transition: var(--transition-fast);
gap: 0.5rem;
border-top-right-radius: var(--radius-md);
border-bottom-right-radius: var(--radius-md);
cursor: pointer;
}
.input-append-button:hover {
@@ -373,59 +373,56 @@
/* Dialog Styles */
.dialog-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
inset: 0;
z-index: 2000;
display: flex;
justify-content: center;
align-items: center;
background: rgb(0 0 0 / 50%);
}
.dialog-container {
background: var(--color-surface);
border-radius: var(--radius-lg);
border: 1px solid var(--color-border);
box-shadow: var(--shadow-xl);
max-width: 400px;
width: 90%;
overflow: hidden;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
width: 90%;
max-width: 400px;
background: var(--color-surface);
box-shadow: var(--shadow-xl);
}
.dialog-header {
padding: 1.5rem 1.5rem 0;
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.5rem 1.5rem 0;
}
.dialog-title {
margin: 0;
font-size: 1.25rem;
font-weight: 600;
color: var(--color-text-primary);
margin: 0;
}
.dialog-close {
background: none;
display: flex;
justify-content: center;
align-items: center;
border: none;
color: var(--color-text-secondary);
cursor: pointer;
border-radius: var(--radius-sm);
padding: 0.25rem;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-sm);
color: var(--color-text-secondary);
background: none;
transition: var(--transition-fast);
cursor: pointer;
}
.dialog-close:hover {
background: var(--color-surface-elevated);
color: var(--color-text-primary);
background: var(--color-surface-elevated);
}
.close-icon {
@@ -438,16 +435,16 @@
}
.confirm-message {
margin: 0;
color: var(--color-text-secondary);
line-height: 1.5;
margin: 0;
}
.dialog-actions {
display: flex;
gap: 1rem;
padding: 0 1.5rem 1.5rem;
justify-content: flex-end;
padding: 0 1.5rem 1.5rem;
gap: 1rem;
}
/* Dark mode adjustments */
@@ -458,14 +455,14 @@
:root.dark .form-input,
:root.auto.dark .form-input {
background: var(--color-surface-elevated);
border-color: var(--color-border);
background: var(--color-surface-elevated);
}
:root.dark .radio-custom,
:root.auto.dark .radio-custom {
background: var(--color-surface-elevated);
border-color: var(--color-border);
background: var(--color-surface-elevated);
}
:root.dark .pattern-table th,
@@ -474,7 +471,7 @@
}
/* Responsive Design */
@media (max-width: 768px) {
@media (width <= 768px) {
.manage-setting-container {
padding: 0.75rem;
gap: 0.75rem;
@@ -485,15 +482,15 @@
}
.header-card .card-header {
align-items: flex-start;
padding: 1rem;
flex-direction: column;
align-items: flex-start;
gap: 0.75rem;
}
.header-actions {
width: 100%;
justify-content: flex-start;
width: 100%;
}
.pattern-table {

2
src/renderer/manage/store/bucketFileDb.ts
View File

@@ -46,7 +46,7 @@ export class FileCacheDb extends Dexie {
'smms',
'tcyun',
'upyun',
'webdavplist'
'webdavplist',
]
const tableNamesMap = tableNames.reduce((acc, cur) => {

18
src/renderer/manage/store/manageStore.ts
View File

@@ -6,15 +6,15 @@ import type { IStringKeyMap } from '#/types/types'
export const useManageStore = defineStore('manageConfig', {
state: () => {
return {
config: {} as IStringKeyMap
config: {} as IStringKeyMap,
}
},
actions: {
async refreshConfig() {
this.config = (await getConfig()) ?? {}
}
},
},
persist: true
persist: true,
})
export const useFileTransferStore = defineStore('fileTransfer', {
@@ -22,7 +22,7 @@ export const useFileTransferStore = defineStore('fileTransfer', {
return {
fileTransferList: [] as IStringKeyMap[],
success: false,
finished: false
finished: false,
}
},
actions: {
@@ -44,8 +44,8 @@ export const useFileTransferStore = defineStore('fileTransfer', {
},
isSuccess() {
return this.success
}
}
},
},
})
export const useDownloadFileTransferStore = defineStore('downloadFileTransfer', {
@@ -53,7 +53,7 @@ export const useDownloadFileTransferStore = defineStore('downloadFileTransfer',
return {
downloadFileTransferList: [] as IStringKeyMap[],
success: false,
finished: false
finished: false,
}
},
actions: {
@@ -75,6 +75,6 @@ export const useDownloadFileTransferStore = defineStore('downloadFileTransfer',
},
isSuccess() {
return this.success
}
}
},
},
})

6
src/renderer/manage/utils/bucketConfigCons.ts
View File

@@ -30,7 +30,7 @@ const AliyunAreaCodeName: IStringKeyMap = {
'oss-eu-central-1': '德国(法兰克福)',
'oss-eu-west-1': '英国(伦敦)',
'oss-me-east-1': '阿联酋(迪拜)',
'oss-rg-china-mainland': '无地域属性'
'oss-rg-china-mainland': '无地域属性',
}
const QiniuAreaCodeName: IStringKeyMap = {
@@ -41,7 +41,7 @@ const QiniuAreaCodeName: IStringKeyMap = {
na0: '北美-洛杉矶',
as0: '亚太-新加坡',
'ap-northeast-1': '亚太-首尔',
'ap-southeast-2': '亚太-河内'
'ap-southeast-2': '亚太-河内',
}
const TencentAreaCodeName: IStringKeyMap = {
@@ -66,7 +66,7 @@ const TencentAreaCodeName: IStringKeyMap = {
'na-ashburn': '弗吉尼亚(美东)',
'na-toronto': '多伦多',
'sa-saopaulo': '圣保罗',
'eu-frankfurt': '法兰克福'
'eu-frankfurt': '法兰克福',
}
export { AliyunAreaCodeName, QiniuAreaCodeName, TencentAreaCodeName }

28
src/renderer/manage/utils/common.ts
View File

@@ -61,7 +61,7 @@ export function renameFileNameWithCustomString(oldName: string, customFormat: st
const date = new Date()
const year = date.getFullYear().toString()
const fileBaseName = window.node.path.basename(oldName, window.node.path.extname(oldName))
const conversionMap: { [key: string]: () => string } = {
const conversionMap: Record<string, () => string> = {
'{Y}': () => year,
'{y}': () => year.slice(2),
'{m}': () => renameFormatHelper(date.getMonth() + 1),
@@ -78,7 +78,7 @@ export function renameFileNameWithCustomString(oldName: string, customFormat: st
? window.node.path.basename(affixFileName, window.node.path.extname(affixFileName))
: window.node.path.basename(oldName, window.node.path.extname(oldName)),
'{uuid}': () => uuidv4().replace(/-/g, ''),
'{timestamp}': () => date.getTime().toString()
'{timestamp}': () => date.getTime().toString(),
}
if (
customFormat === undefined ||
@@ -106,7 +106,7 @@ export function renameFileNameWithCustomString(oldName: string, customFormat: st
export function renameFile(
{ timestampRename, randomStringRename, customRename, customRenameFormat }: IStringKeyMap,
oldName = ''
oldName = '',
): string {
switch (true) {
case timestampRename:
@@ -169,7 +169,7 @@ export function formObjToTableData(obj: any) {
.filter(key => !exclude.includes(obj[key]))
.map(key => ({
key,
value: typeof obj[key] === 'object' ? JSON.stringify(obj[key]) : obj[key]
value: typeof obj[key] === 'object' ? JSON.stringify(obj[key]) : obj[key],
}))
.sort((a, b) => a.key.localeCompare(b.key))
}
@@ -177,7 +177,7 @@ export function formObjToTableData(obj: any) {
export function isValidUrl(str: string) {
try {
return !!new URL(str)
} catch (e) {
} catch (_e) {
return false
}
}
@@ -212,48 +212,48 @@ export const customRenameFormatTable = [
placeholder: '{Y}',
description: '年份，4位数',
placeholderB: '{y}',
descriptionB: '年份，2位数'
descriptionB: '年份，2位数',
},
{
placeholder: '{m}',
description: '月份(01-12)',
placeholderB: '{d}',
descriptionB: '日期(01-31)'
descriptionB: '日期(01-31)',
},
{
placeholder: '{h}',
description: '小时(00-23)',
placeholderB: '{i}',
descriptionB: '分钟(00-59)'
descriptionB: '分钟(00-59)',
},
{
placeholder: '{s}',
description: '秒(00-59)',
placeholderB: '{ms}',
descriptionB: '毫秒(000-999)'
descriptionB: '毫秒(000-999)',
},
{
placeholder: '{timestamp}',
description: '时间戳（毫秒）',
placeholderB: '{uuid}',
descriptionB: 'uuid字符串'
descriptionB: 'uuid字符串',
},
{
placeholder: '{md5}',
description: 'md5',
placeholderB: '{md5-16}',
descriptionB: 'md5前16位'
descriptionB: 'md5前16位',
},
{
placeholder: '{str-number}',
description: 'number位随机字符串',
placeholderB: '{filename}',
descriptionB: '原文件名'
descriptionB: '原文件名',
},
{
placeholder: '{sha256}',
description: 'SHA256 哈希',
placeholderB: '{sha256-n}',
descriptionB: 'SHA256 哈希（前n位）'
}
descriptionB: 'SHA256 哈希（前n位）',
},
]

294
src/renderer/manage/utils/constants.ts
View File

@@ -13,8 +13,8 @@ const i18n = createI18n<MessageSchema, 'en' | 'zh-CN' | 'zh-TW'>({
messages: {
en,
'zh-CN': zhCN,
'zh-TW': zhTW
}
'zh-TW': zhTW,
},
})
const { t } = i18n.global
const defaultBaseRule = (name: string) => {
@@ -22,8 +22,8 @@ const defaultBaseRule = (name: string) => {
{
required: true,
message: `${t('pages.manage.constant.pleaseInput', { name })}`,
trigger: 'blur'
}
trigger: 'blur',
},
]
}
@@ -31,12 +31,12 @@ const itemsPerPageRule = [
{
required: true,
message: t('pages.manage.constant.inputItemsPerPage'),
trigger: 'blur'
trigger: 'blur',
},
{
type: 'number',
message: t('pages.manage.constant.itemsPPBeNumber'),
trigger: 'change'
trigger: 'change',
},
{
validator: (_rule: any, value: any, callback: any) => {
@@ -46,15 +46,15 @@ const itemsPerPageRule = [
callback()
}
},
trigger: 'change'
}
trigger: 'change',
},
]
const aliasRule = [
{
required: true,
message: t('pages.manage.constant.inputAlias'),
trigger: 'blur'
trigger: 'blur',
},
{
validator: (_rule: any, value: any, callback: any) => {
@@ -65,8 +65,8 @@ const aliasRule = [
callback()
}
},
trigger: 'change'
}
trigger: 'change',
},
]
const aliasTooltip = t('pages.manage.constant.aliasTip')
@@ -88,27 +88,27 @@ export const supportedPicBedList: IStringKeyMap = {
type: 'string',
rule: aliasRule,
default: 'smms-A',
tooltip: aliasTooltip
tooltip: aliasTooltip,
},
token: {
required: true,
description: t('pages.manage.constant.smms.tokenDesc'),
placeholder: t('pages.manage.constant.smms.tokenPlaceholder'),
type: 'string',
rule: defaultBaseRule('token')
rule: defaultBaseRule('token'),
},
paging: {
required: true,
description: t('pages.manage.constant.pagingDesc'),
default: true,
type: 'boolean',
tooltip: pagingTooltip
}
tooltip: pagingTooltip,
},
},
explain: t('pages.manage.constant.smms.explain'),
options: ['alias', 'token', 'paging'],
refLink: 'https://piclist.cn/manage.html#smms',
referenceText: t('pages.manage.constant.referText')
referenceText: t('pages.manage.constant.referText'),
},
qiniu: {
name: t('pages.manage.constant.qiniu.name'),
@@ -121,28 +121,28 @@ export const supportedPicBedList: IStringKeyMap = {
type: 'string',
rule: aliasRule,
default: 'qiniu-A',
tooltip: aliasTooltip
tooltip: aliasTooltip,
},
accessKey: {
required: true,
description: t('pages.manage.constant.accessKeyDesc'),
placeholder: t('pages.manage.constant.accessKeyPlaceholder'),
type: 'string',
rule: defaultBaseRule('accessKey')
rule: defaultBaseRule('accessKey'),
},
secretKey: {
required: true,
description: t('pages.manage.constant.secretKeyDesc'),
placeholder: t('pages.manage.constant.secretKeyPlaceholder'),
type: 'string',
rule: defaultBaseRule('secretKey')
rule: defaultBaseRule('secretKey'),
},
bucketName: {
required: false,
description: t('pages.manage.constant.bucketDesc'),
placeholder: t('pages.manage.constant.bucketPlaceholder'),
type: 'string',
tooltip: bucketNameTooltip
tooltip: bucketNameTooltip,
},
baseDir: {
required: false,
@@ -150,21 +150,21 @@ export const supportedPicBedList: IStringKeyMap = {
placeholder: t('pages.manage.constant.baseDirPlaceholder'),
default: '/',
type: 'string',
tooltip: baseDirTooltip
tooltip: baseDirTooltip,
},
isAutoCustomUrl: {
required: true,
description: t('pages.manage.constant.isAutoGetCustomUrl'),
default: true,
type: 'boolean',
tooltip: isAutoCustomUrlTooltip
tooltip: isAutoCustomUrlTooltip,
},
paging: {
required: true,
description: t('pages.manage.constant.isEnablePaging'),
default: true,
type: 'boolean',
tooltip: pagingTooltip
tooltip: pagingTooltip,
},
itemsPerPage: {
required: true,
@@ -172,13 +172,13 @@ export const supportedPicBedList: IStringKeyMap = {
default: 50,
type: 'number',
rule: itemsPerPageRule,
tooltip: itemsPerPageTooltip
}
tooltip: itemsPerPageTooltip,
},
},
explain: t('pages.manage.constant.explain'),
options: ['alias', 'accessKey', 'secretKey', 'bucketName', 'baseDir', 'isAutoCustomUrl', 'paging', 'itemsPerPage'],
refLink: 'https://piclist.cn/manage.html#%E4%B8%83%E7%89%9B%E4%BA%91',
referenceText: t('pages.manage.constant.referText')
referenceText: t('pages.manage.constant.referText'),
},
github: {
name: 'GitHub',
@@ -191,7 +191,7 @@ export const supportedPicBedList: IStringKeyMap = {
type: 'string',
rule: aliasRule,
default: 'github-A',
tooltip: aliasTooltip
tooltip: aliasTooltip,
},
token: {
required: true,
@@ -199,28 +199,28 @@ export const supportedPicBedList: IStringKeyMap = {
placeholder: t('pages.manage.constant.github.tokenPlaceholder'),
type: 'string',
rule: defaultBaseRule('token'),
tooltip: t('pages.manage.constant.github.tokenTips')
tooltip: t('pages.manage.constant.github.tokenTips'),
},
githubUsername: {
required: true,
description: t('pages.manage.constant.userNameDesc'),
placeholder: t('pages.manage.constant.userNamePlaceholder'),
type: 'string',
rule: defaultBaseRule(t('pages.manage.constant.userNameDesc'))
rule: defaultBaseRule(t('pages.manage.constant.userNameDesc')),
},
proxy: {
required: false,
description: t('pages.manage.constant.proxyDesc'),
placeholder: t('pages.manage.constant.proxyPlaceholder'),
type: 'string',
tooltip: t('pages.manage.constant.proxyTips')
tooltip: t('pages.manage.constant.proxyTips'),
},
paging: {
required: true,
description: t('pages.manage.constant.isEnablePaging'),
default: false,
type: 'boolean',
tooltip: pagingTooltip
tooltip: pagingTooltip,
},
customUrl: {
required: false,
@@ -275,15 +275,15 @@ export const supportedPicBedList: IStringKeyMap = {
callback()
}
},
trigger: 'change'
}
]
}
trigger: 'change',
},
],
},
},
explain: t('pages.manage.constant.github.explain'),
options: ['alias', 'token', 'githubUsername', 'proxy', 'customUrl'],
refLink: 'https://piclist.cn/manage.html#github',
referenceText: t('pages.manage.constant.referText')
referenceText: t('pages.manage.constant.referText'),
},
aliyun: {
name: t('pages.manage.constant.aliyun.name'),
@@ -296,28 +296,28 @@ export const supportedPicBedList: IStringKeyMap = {
type: 'string',
rule: aliasRule,
default: 'aliyun-A',
tooltip: aliasTooltip
tooltip: aliasTooltip,
},
accessKeyId: {
required: true,
description: t('pages.manage.constant.accessKeyIdDesc'),
placeholder: t('pages.manage.constant.accessKeyIdPlaceholder'),
type: 'string',
rule: defaultBaseRule('accessKeyId')
rule: defaultBaseRule('accessKeyId'),
},
accessKeySecret: {
required: true,
description: t('pages.manage.constant.accessKeySecretDesc'),
placeholder: t('pages.manage.constant.accessKeySecretPlaceholder'),
type: 'string',
rule: defaultBaseRule('accessKeySecret')
rule: defaultBaseRule('accessKeySecret'),
},
bucketName: {
required: false,
description: t('pages.manage.constant.bucketDesc'),
placeholder: t('pages.manage.constant.bucketPlaceholder'),
type: 'string',
tooltip: bucketNameTooltip
tooltip: bucketNameTooltip,
},
baseDir: {
required: false,
@@ -325,21 +325,21 @@ export const supportedPicBedList: IStringKeyMap = {
placeholder: t('pages.manage.constant.baseDirPlaceholder'),
type: 'string',
default: '/',
tooltip: baseDirTooltip
tooltip: baseDirTooltip,
},
isAutoCustomUrl: {
required: true,
description: t('pages.manage.constant.isAutoGetCustomUrl'),
default: true,
type: 'boolean',
tooltip: isAutoCustomUrlTooltip
tooltip: isAutoCustomUrlTooltip,
},
paging: {
required: true,
description: t('pages.manage.constant.isEnablePaging'),
default: true,
type: 'boolean',
tooltip: pagingTooltip
tooltip: pagingTooltip,
},
itemsPerPage: {
required: true,
@@ -347,8 +347,8 @@ export const supportedPicBedList: IStringKeyMap = {
default: 50,
type: 'number',
rule: itemsPerPageRule,
tooltip: itemsPerPageTooltip
}
tooltip: itemsPerPageTooltip,
},
},
explain: t('pages.manage.constant.explain'),
options: [
@@ -359,10 +359,10 @@ export const supportedPicBedList: IStringKeyMap = {
'baseDir',
'isAutoCustomUrl',
'paging',
'itemsPerPage'
'itemsPerPage',
],
refLink: 'https://piclist.cn/manage.html#%E9%98%BF%E9%87%8C%E4%BA%91oss',
referenceText: t('pages.manage.constant.referText')
referenceText: t('pages.manage.constant.referText'),
},
tcyun: {
name: t('pages.manage.constant.tcyun.name'),
@@ -375,21 +375,21 @@ export const supportedPicBedList: IStringKeyMap = {
type: 'string',
rule: aliasRule,
default: 'tcyun-A',
tooltip: aliasTooltip
tooltip: aliasTooltip,
},
secretId: {
required: true,
description: t('pages.manage.constant.secretIdDesc'),
placeholder: t('pages.manage.constant.secretIdPlaceholder'),
type: 'string',
rule: defaultBaseRule('secretId')
rule: defaultBaseRule('secretId'),
},
secretKey: {
required: true,
description: t('pages.manage.constant.secretKeyDesc'),
placeholder: t('pages.manage.constant.secretKeyPlaceholder'),
type: 'string',
rule: defaultBaseRule('secretKey')
rule: defaultBaseRule('secretKey'),
},
appId: {
required: true,
@@ -397,14 +397,14 @@ export const supportedPicBedList: IStringKeyMap = {
placeholder: t('pages.manage.constant.tcyun.appIdPlaceholder'),
type: 'string',
rule: defaultBaseRule('appId'),
tooltip: t('pages.manage.constant.tcyun.appIdTips')
tooltip: t('pages.manage.constant.tcyun.appIdTips'),
},
bucketName: {
required: false,
description: t('pages.manage.constant.bucketDesc'),
placeholder: t('pages.manage.constant.bucketPlaceholder'),
type: 'string',
tooltip: bucketNameTooltip
tooltip: bucketNameTooltip,
},
baseDir: {
required: false,
@@ -412,21 +412,21 @@ export const supportedPicBedList: IStringKeyMap = {
placeholder: t('pages.manage.constant.baseDirPlaceholder'),
type: 'string',
default: '/',
tooltip: baseDirTooltip
tooltip: baseDirTooltip,
},
isAutoCustomUrl: {
required: true,
description: t('pages.manage.constant.isAutoGetCustomUrl'),
default: true,
type: 'boolean',
tooltip: isAutoCustomUrlTooltip
tooltip: isAutoCustomUrlTooltip,
},
paging: {
required: true,
description: t('pages.manage.constant.isEnablePaging'),
default: true,
type: 'boolean',
tooltip: pagingTooltip
tooltip: pagingTooltip,
},
itemsPerPage: {
required: true,
@@ -434,8 +434,8 @@ export const supportedPicBedList: IStringKeyMap = {
default: 50,
type: 'number',
rule: itemsPerPageRule,
tooltip: itemsPerPageTooltip
}
tooltip: itemsPerPageTooltip,
},
},
explain: t('pages.manage.constant.explain'),
options: [
@@ -447,10 +447,10 @@ export const supportedPicBedList: IStringKeyMap = {
'baseDir',
'isAutoCustomUrl',
'paging',
'itemsPerPage'
'itemsPerPage',
],
refLink: 'https://piclist.cn/manage.html#%E8%85%BE%E8%AE%AF%E4%BA%91',
referenceText: t('pages.manage.constant.referText')
referenceText: t('pages.manage.constant.referText'),
},
upyun: {
name: t('pages.manage.constant.upyun.name'),
@@ -463,35 +463,35 @@ export const supportedPicBedList: IStringKeyMap = {
type: 'string',
rule: aliasRule,
default: 'upyun-A',
tooltip: aliasTooltip
tooltip: aliasTooltip,
},
bucketName: {
required: true,
description: t('pages.manage.constant.upyun.bucketDesc'),
placeholder: t('pages.manage.constant.upyun.bucketPlaceholder'),
type: 'string',
rule: defaultBaseRule('bucketName')
rule: defaultBaseRule('bucketName'),
},
operator: {
required: true,
description: t('pages.manage.constant.upyun.operatorNameDesc'),
placeholder: t('pages.manage.constant.upyun.operatorNamePlaceholder'),
type: 'string',
rule: defaultBaseRule(t('pages.manage.constant.upyun.operatorNameDesc'))
rule: defaultBaseRule(t('pages.manage.constant.upyun.operatorNameDesc')),
},
password: {
required: true,
description: t('pages.manage.constant.upyun.operatorPassDesc'),
placeholder: t('pages.manage.constant.upyun.operatorPassPlaceholder'),
type: 'string',
rule: defaultBaseRule(t('pages.manage.constant.upyun.operatorPassDesc'))
rule: defaultBaseRule(t('pages.manage.constant.upyun.operatorPassDesc')),
},
baseDir: {
required: false,
description: t('pages.manage.constant.upyun.baseDirDesc'),
placeholder: t('pages.manage.constant.upyun.baseDirPlaceholder'),
type: 'string',
default: '/'
default: '/',
},
customUrl: {
required: true,
@@ -502,7 +502,7 @@ export const supportedPicBedList: IStringKeyMap = {
{
required: true,
message: t('pages.manage.constant.upyun.notEmpty'),
trigger: 'change'
trigger: 'change',
},
{
validator: (_rule: any, value: any, callback: any) => {
@@ -526,9 +526,9 @@ export const supportedPicBedList: IStringKeyMap = {
callback()
}
},
trigger: 'change'
}
]
trigger: 'change',
},
],
},
antiLeechToken: {
required: false,
@@ -536,20 +536,20 @@ export const supportedPicBedList: IStringKeyMap = {
placeholder: t('pages.manage.constant.upyun.antiLeechTokenPlaceholder'),
type: 'string',
default: '',
tooltip: t('pages.manage.constant.upyun.antiLeechTokenTooltip')
tooltip: t('pages.manage.constant.upyun.antiLeechTokenTooltip'),
},
expireTime: {
required: false,
description: t('pages.manage.constant.upyun.antiLeechExp'),
type: 'number',
default: 0
default: 0,
},
paging: {
required: true,
description: t('pages.manage.constant.isEnablePaging'),
default: true,
type: 'boolean',
tooltip: pagingTooltip
tooltip: pagingTooltip,
},
itemsPerPage: {
required: true,
@@ -557,8 +557,8 @@ export const supportedPicBedList: IStringKeyMap = {
default: 50,
type: 'number',
rule: itemsPerPageRule,
tooltip: itemsPerPageTooltip
}
tooltip: itemsPerPageTooltip,
},
},
explain: t('pages.manage.constant.upyun.explain'),
options: [
@@ -571,10 +571,10 @@ export const supportedPicBedList: IStringKeyMap = {
'paging',
'itemsPerPage',
'antiLeechToken',
'expireTime'
'expireTime',
],
refLink: 'https://piclist.cn/manage.html#%E5%8F%88%E6%8B%8D%E4%BA%91',
referenceText: t('pages.manage.constant.referText')
referenceText: t('pages.manage.constant.referText'),
},
imgur: {
name: 'Imgur',
@@ -586,14 +586,14 @@ export const supportedPicBedList: IStringKeyMap = {
placeholder: t('pages.manage.constant.aliasPlaceholder'),
type: 'string',
rule: aliasRule,
default: 'imgur-A'
default: 'imgur-A',
},
imgurUserName: {
required: true,
description: t('pages.manage.constant.userNameDesc'),
placeholder: t('pages.manage.constant.userNamePlaceholder'),
type: 'string',
rule: defaultBaseRule('imgurUserName')
rule: defaultBaseRule('imgurUserName'),
},
accessToken: {
required: true,
@@ -601,20 +601,20 @@ export const supportedPicBedList: IStringKeyMap = {
placeholder: t('pages.manage.constant.imgur.accessTokenPlaceholder'),
type: 'string',
rule: defaultBaseRule('accessToken'),
tooltip: t('pages.manage.constant.imgur.accessTokenTips')
tooltip: t('pages.manage.constant.imgur.accessTokenTips'),
},
proxy: {
required: false,
description: t('pages.manage.constant.proxyDesc'),
placeholder: t('pages.manage.constant.proxyPlaceholder'),
type: 'string',
tooltip: t('pages.manage.constant.proxyTips')
}
tooltip: t('pages.manage.constant.proxyTips'),
},
},
explain: t('pages.manage.constant.imgur.explain'),
options: ['alias', 'imgurUserName', 'accessToken', 'proxy'],
refLink: 'https://piclist.cn/manage.html#imgur',
referenceText: t('pages.manage.constant.referText')
referenceText: t('pages.manage.constant.referText'),
},
s3plist: {
name: 'S3 API',
@@ -627,49 +627,49 @@ export const supportedPicBedList: IStringKeyMap = {
type: 'string',
rule: aliasRule,
default: 's3plist-A',
tooltip: aliasTooltip
tooltip: aliasTooltip,
},
accessKeyId: {
required: true,
description: t('pages.manage.constant.accessKeyIdDesc'),
placeholder: t('pages.manage.constant.accessKeyIdPlaceholder'),
type: 'string',
rule: defaultBaseRule('accessKeyId')
rule: defaultBaseRule('accessKeyId'),
},
secretAccessKey: {
required: true,
description: t('pages.manage.constant.accessKeySecretDesc'),
placeholder: t('pages.manage.constant.accessKeySecretDesc'),
type: 'string',
rule: defaultBaseRule('secretAccessKey')
rule: defaultBaseRule('secretAccessKey'),
},
endpoint: {
required: false,
description: t('pages.manage.constant.s3.endpointDesc'),
placeholder: t('pages.manage.constant.s3.endpointPlaceholder'),
type: 'string',
tooltip: t('pages.manage.constant.s3.endpointTips')
tooltip: t('pages.manage.constant.s3.endpointTips'),
},
sslEnabled: {
required: true,
description: t('pages.manage.constant.s3.enableHttps'),
default: true,
type: 'boolean',
tooltip: t('pages.manage.constant.s3.enableHttpsTip')
tooltip: t('pages.manage.constant.s3.enableHttpsTip'),
},
s3ForcePathStyle: {
required: true,
description: t('pages.manage.constant.s3.enableS3PathStyle'),
default: false,
type: 'boolean',
tooltip: t('pages.manage.constant.s3.enableS3PathStyleTip')
tooltip: t('pages.manage.constant.s3.enableS3PathStyleTip'),
},
proxy: {
required: false,
description: t('pages.manage.constant.proxyDesc'),
placeholder: t('pages.manage.constant.proxyPlaceholder'),
type: 'string',
tooltip: t('pages.manage.constant.proxyTips')
tooltip: t('pages.manage.constant.proxyTips'),
},
aclForUpload: {
required: true,
@@ -684,16 +684,16 @@ export const supportedPicBedList: IStringKeyMap = {
'authenticated-read': t('pages.manage.constant.s3.acl.authenticatedRead'),
'bucket-owner-read': t('pages.manage.constant.s3.acl.bucketOwnerRead'),
'bucket-owner-full-control': t('pages.manage.constant.s3.acl.bucketOwnerFullControl'),
'aws-exec-read': t('pages.manage.constant.s3.acl.awsExecRead')
'aws-exec-read': t('pages.manage.constant.s3.acl.awsExecRead'),
},
tooltip: t('pages.manage.constant.s3.aclTips')
tooltip: t('pages.manage.constant.s3.aclTips'),
},
bucketName: {
required: false,
description: t('pages.manage.constant.bucketDesc'),
placeholder: t('pages.manage.constant.bucketPlaceholder'),
type: 'string',
tooltip: bucketNameTooltip
tooltip: bucketNameTooltip,
},
baseDir: {
required: false,
@@ -701,21 +701,21 @@ export const supportedPicBedList: IStringKeyMap = {
placeholder: t('pages.manage.constant.baseDirPlaceholder'),
type: 'string',
default: '/',
tooltip: baseDirTooltip
tooltip: baseDirTooltip,
},
dogeCloudSupport: {
required: false,
description: t('pages.manage.constant.s3.enableDogeSupport'),
default: false,
type: 'boolean',
tooltip: t('pages.manage.constant.s3.enableDogeSupportTip')
tooltip: t('pages.manage.constant.s3.enableDogeSupportTip'),
},
paging: {
required: true,
description: t('pages.manage.constant.isEnablePaging'),
default: true,
type: 'boolean',
tooltip: pagingTooltip
tooltip: pagingTooltip,
},
itemsPerPage: {
required: true,
@@ -723,8 +723,8 @@ export const supportedPicBedList: IStringKeyMap = {
default: 50,
type: 'number',
rule: itemsPerPageRule,
tooltip: itemsPerPageTooltip
}
tooltip: itemsPerPageTooltip,
},
},
explain: t('pages.manage.constant.explain'),
options: [
@@ -740,10 +740,10 @@ export const supportedPicBedList: IStringKeyMap = {
'baseDir',
'dogeCloudSupport',
'paging',
'itemsPerPage'
'itemsPerPage',
],
refLink: 'https://piclist.cn/manage.html#s3',
referenceText: t('pages.manage.constant.referText')
referenceText: t('pages.manage.constant.referText'),
},
webdavplist: {
name: 'WebDAV',
@@ -756,7 +756,7 @@ export const supportedPicBedList: IStringKeyMap = {
type: 'string',
rule: aliasRule,
default: 'webdavplist-A',
tooltip: aliasTooltip
tooltip: aliasTooltip,
},
endpoint: {
required: true,
@@ -764,14 +764,14 @@ export const supportedPicBedList: IStringKeyMap = {
placeholder: t('pages.manage.constant.webdav.hostPlaceholder'),
type: 'string',
rule: defaultBaseRule('rootDomain'),
tooltip: t('pages.manage.constant.webdav.hostTips')
tooltip: t('pages.manage.constant.webdav.hostTips'),
},
username: {
required: true,
description: t('pages.manage.constant.userNameDesc'),
placeholder: t('pages.manage.constant.userNamePlaceholder'),
type: 'string',
rule: defaultBaseRule('username')
rule: defaultBaseRule('username'),
},
bucketName: {
required: true,
@@ -780,21 +780,21 @@ export const supportedPicBedList: IStringKeyMap = {
type: 'string',
default: 'webdav',
disabled: true,
tooltip: t('pages.manage.constant.specialTips')
tooltip: t('pages.manage.constant.specialTips'),
},
password: {
required: true,
description: t('pages.manage.constant.passwordDesc'),
placeholder: t('pages.manage.constant.passwordPlaceholder'),
type: 'string',
rule: defaultBaseRule('password')
rule: defaultBaseRule('password'),
},
baseDir: {
required: false,
description: t('pages.manage.constant.webdav.baseDirDesc'),
placeholder: t('pages.manage.constant.webdav.baseDirPlaceholder'),
type: 'string',
default: '/'
default: '/',
},
customUrl: {
required: false,
@@ -815,9 +815,9 @@ export const supportedPicBedList: IStringKeyMap = {
callback()
}
},
trigger: 'change'
}
]
trigger: 'change',
},
],
},
webPath: {
required: false,
@@ -825,21 +825,21 @@ export const supportedPicBedList: IStringKeyMap = {
placeholder: t('pages.manage.constant.webdav.webPathPlaceholder'),
type: 'string',
tooltip: t('pages.manage.constant.webdav.webPathTips'),
default: ''
default: '',
},
proxy: {
required: false,
description: t('pages.manage.constant.proxyDesc'),
placeholder: t('pages.manage.constant.proxyPlaceholder'),
type: 'string',
tooltip: t('pages.manage.constant.proxyTips')
tooltip: t('pages.manage.constant.proxyTips'),
},
sslEnabled: {
required: true,
description: t('pages.manage.constant.webdav.enableHttpsDesc'),
default: true,
type: 'boolean',
tooltip: t('pages.manage.constant.webdav.enableHttpsTips')
tooltip: t('pages.manage.constant.webdav.enableHttpsTips'),
},
authType: {
required: true,
@@ -848,9 +848,9 @@ export const supportedPicBedList: IStringKeyMap = {
type: 'select',
selectOptions: {
basic: 'Basic',
digest: 'Digest'
}
}
digest: 'Digest',
},
},
},
explain: t('pages.manage.constant.webdav.explain'),
options: [
@@ -864,10 +864,10 @@ export const supportedPicBedList: IStringKeyMap = {
'webPath',
'proxy',
'sslEnabled',
'authType'
'authType',
],
refLink: 'https://piclist.cn/manage.html#webdav',
referenceText: t('pages.manage.constant.referText')
referenceText: t('pages.manage.constant.referText'),
},
local: {
name: t('pages.manage.constant.local.name'),
@@ -880,7 +880,7 @@ export const supportedPicBedList: IStringKeyMap = {
type: 'string',
rule: aliasRule,
default: 'local-A',
tooltip: aliasTooltip
tooltip: aliasTooltip,
},
baseDir: {
required: true,
@@ -896,9 +896,9 @@ export const supportedPicBedList: IStringKeyMap = {
} else {
callback()
}
}
}
]
},
},
],
},
customUrl: {
required: false,
@@ -919,9 +919,9 @@ export const supportedPicBedList: IStringKeyMap = {
callback()
}
},
trigger: 'change'
}
]
trigger: 'change',
},
],
},
bucketName: {
required: true,
@@ -930,7 +930,7 @@ export const supportedPicBedList: IStringKeyMap = {
type: 'string',
default: 'local',
disabled: true,
tooltip: t('pages.manage.constant.specialTips')
tooltip: t('pages.manage.constant.specialTips'),
},
webPath: {
required: false,
@@ -938,13 +938,13 @@ export const supportedPicBedList: IStringKeyMap = {
placeholder: t('pages.manage.constant.local.webPathPlaceholder'),
type: 'string',
tooltip: t('pages.manage.constant.local.webPathTips'),
default: ''
}
default: '',
},
},
explain: t('pages.manage.constant.local.explain'),
options: ['alias', 'baseDir', 'customUrl', 'bucketName', 'webPath'],
refLink: 'https://piclist.cn/manage.html#%E6%9C%AC%E5%9C%B0%E5%AD%98%E5%82%A8',
referenceText: t('pages.manage.constant.referText')
referenceText: t('pages.manage.constant.referText'),
},
sftp: {
name: 'SFTP',
@@ -957,7 +957,7 @@ export const supportedPicBedList: IStringKeyMap = {
type: 'string',
rule: aliasRule,
default: 'sftp-A',
tooltip: aliasTooltip
tooltip: aliasTooltip,
},
host: {
required: true,
@@ -965,56 +965,56 @@ export const supportedPicBedList: IStringKeyMap = {
placeholder: t('pages.manage.constant.sftp.hostPlaceholder'),
type: 'string',
rule: defaultBaseRule('host'),
default: ''
default: '',
},
port: {
required: false,
description: t('pages.manage.constant.sftp.portDesc'),
placeholder: t('pages.manage.constant.sftp.portPlaceholder'),
type: 'number',
default: 22
default: 22,
},
username: {
required: false,
description: t('pages.manage.constant.userNameDesc'),
placeholder: t('pages.manage.constant.userNamePlaceholder'),
type: 'string',
default: ''
default: '',
},
password: {
required: false,
description: t('pages.manage.constant.passwordDesc'),
placeholder: t('pages.manage.constant.passwordPlaceholder'),
type: 'string',
default: ''
default: '',
},
privateKey: {
required: false,
description: t('pages.manage.constant.sftp.privateKeyDesc'),
placeholder: t('pages.manage.constant.sftp.privateKeyPlaceholder'),
type: 'string',
default: ''
default: '',
},
passphrase: {
required: false,
description: t('pages.manage.constant.sftp.passphraseDesc'),
placeholder: t('pages.manage.constant.sftp.passphrasePlaceholder'),
type: 'string',
default: ''
default: '',
},
fileMode: {
required: false,
description: t('pages.manage.constant.sftp.fileModeDesc'),
placeholder: t('pages.manage.constant.sftp.fileModePlaceholder'),
type: 'string',
default: '0664'
default: '0664',
},
dirMode: {
required: false,
description: t('pages.manage.constant.sftp.dirModeDesc'),
placeholder: t('pages.manage.constant.sftp.dirModePlaceholder'),
type: 'string',
default: '0755'
default: '0755',
},
baseDir: {
required: false,
@@ -1030,9 +1030,9 @@ export const supportedPicBedList: IStringKeyMap = {
} else {
callback()
}
}
}
]
},
},
],
},
customUrl: {
required: false,
@@ -1053,9 +1053,9 @@ export const supportedPicBedList: IStringKeyMap = {
callback()
}
},
trigger: 'change'
}
]
trigger: 'change',
},
],
},
bucketName: {
required: true,
@@ -1064,7 +1064,7 @@ export const supportedPicBedList: IStringKeyMap = {
type: 'string',
default: 'sftp',
disabled: true,
tooltip: t('pages.manage.constant.specialTips')
tooltip: t('pages.manage.constant.specialTips'),
},
webPath: {
required: false,
@@ -1072,8 +1072,8 @@ export const supportedPicBedList: IStringKeyMap = {
placeholder: t('pages.manage.constant.sftp.webPathPlaceholder'),
type: 'string',
tooltip: t('pages.manage.constant.sftp.webPathTips'),
default: ''
}
default: '',
},
},
explain: t('pages.manage.constant.sftp.explain'),
options: [
@@ -1089,9 +1089,9 @@ export const supportedPicBedList: IStringKeyMap = {
'baseDir',
'customUrl',
'bucketName',
'webPath'
'webPath',
],
refLink: 'https://piclist.cn/manage.html#sftp',
referenceText: t('pages.manage.constant.referText')
}
referenceText: t('pages.manage.constant.referText'),
},
}

2
src/renderer/manage/utils/digestAuth.ts
View File

@@ -13,7 +13,7 @@ export function digestAuthHeader(
uri: string,
wwwAuthenticate: string,
username: string,
password: string
password: string,
) {
const parts = wwwAuthenticate.split(',')
const opts = {} as IStringKeyMap

2
src/renderer/manage/utils/icon.ts
View File

@@ -221,5 +221,5 @@ export const availableIconList = [
'yaml',
'yml',
'z',
'zip'
'zip',
]

76
src/renderer/manage/utils/newBucketConfig.ts
View File

@@ -15,8 +15,8 @@ const i18n = createI18n<MessageSchema, 'en' | 'zh-CN' | 'zh-TW'>({
messages: {
en,
'zh-CN': zhCN,
'zh-TW': zhTW
}
'zh-TW': zhTW,
},
})
const { t } = i18n.global
@@ -36,7 +36,7 @@ export const newBucketConfig: IStringKeyMap = {
{
required: true,
message: t('pages.manage.newBucket.bucketNoEmpty'),
trigger: 'blur'
trigger: 'blur',
},
{
validator: (_: any, value: any, callback: any) => {
@@ -49,9 +49,9 @@ export const newBucketConfig: IStringKeyMap = {
callback()
}
},
trigger: 'change'
}
]
trigger: 'change',
},
],
},
region: {
required: true,
@@ -59,7 +59,7 @@ export const newBucketConfig: IStringKeyMap = {
paraType: 'string',
component: 'select',
default: 'ap-nanjing',
options: TencentAreaCodeName
options: TencentAreaCodeName,
},
acl: {
required: true,
@@ -70,11 +70,11 @@ export const newBucketConfig: IStringKeyMap = {
options: {
private: t('pages.manage.newBucket.acl.private'),
publicRead: t('pages.manage.newBucket.acl.publicRead'),
publicReadWrite: t('pages.manage.newBucket.acl.publicReadWrite')
}
}
publicReadWrite: t('pages.manage.newBucket.acl.publicReadWrite'),
},
},
},
options: ['BucketName', 'region', 'acl']
options: ['BucketName', 'region', 'acl'],
},
aliyun: {
name: t('pages.manage.newBucket.aliyun.name'),
@@ -91,10 +91,10 @@ export const newBucketConfig: IStringKeyMap = {
{
required: true,
message: t('pages.manage.newBucket.bucketNoEmpty'),
trigger: 'blur'
trigger: 'blur',
},
{
validator: (rule: any, value: any, callback: any) => {
validator: (_rule: any, value: any, callback: any) => {
const reg = /^[a-z0-9][a-z0-9-]{0,61}[a-z0-9]$/
if (value.length > 63) {
callback(new Error(t('pages.manage.newBucket.aliyun.bucketLengthMsg')))
@@ -104,9 +104,9 @@ export const newBucketConfig: IStringKeyMap = {
callback()
}
},
trigger: 'change'
}
]
trigger: 'change',
},
],
},
region: {
required: true,
@@ -114,7 +114,7 @@ export const newBucketConfig: IStringKeyMap = {
paraType: 'string',
component: 'select',
default: 'oss-cn-hangzhou',
options: AliyunAreaCodeName
options: AliyunAreaCodeName,
},
acl: {
required: true,
@@ -125,11 +125,11 @@ export const newBucketConfig: IStringKeyMap = {
options: {
private: t('pages.manage.newBucket.acl.private'),
publicRead: t('pages.manage.newBucket.acl.publicRead'),
publicReadWrite: t('pages.manage.newBucket.acl.publicReadWrite')
}
}
publicReadWrite: t('pages.manage.newBucket.acl.publicReadWrite'),
},
},
},
options: ['BucketName', 'region', 'acl']
options: ['BucketName', 'region', 'acl'],
},
qiniu: {
name: t('pages.manage.newBucket.qiniu.name'),
@@ -146,7 +146,7 @@ export const newBucketConfig: IStringKeyMap = {
{
required: true,
message: t('pages.manage.newBucket.bucketNoEmpty'),
trigger: 'blur'
trigger: 'blur',
},
{
validator: (_: any, value: any, callback: any) => {
@@ -159,9 +159,9 @@ export const newBucketConfig: IStringKeyMap = {
callback()
}
},
trigger: 'change'
}
]
trigger: 'change',
},
],
},
region: {
required: true,
@@ -169,17 +169,17 @@ export const newBucketConfig: IStringKeyMap = {
paraType: 'string',
component: 'select',
default: 'z0',
options: QiniuAreaCodeName
options: QiniuAreaCodeName,
},
acl: {
required: true,
description: t('pages.manage.newBucket.qiniu.publicAccess'),
paraType: 'boolean',
component: 'switch',
default: false
}
default: false,
},
},
options: ['BucketName', 'region', 'acl']
options: ['BucketName', 'region', 'acl'],
},
s3plist: {
name: t('pages.manage.newBucket.s3.name'),
@@ -196,16 +196,16 @@ export const newBucketConfig: IStringKeyMap = {
{
required: true,
message: t('pages.manage.newBucket.bucketNoEmpty'),
trigger: 'blur'
}
]
trigger: 'blur',
},
],
},
region: {
required: true,
description: t('pages.manage.newBucket.region'),
paraType: 'string',
component: 'input',
default: 'us-east-1'
default: 'us-east-1',
},
acl: {
required: true,
@@ -217,10 +217,10 @@ export const newBucketConfig: IStringKeyMap = {
private: t('pages.manage.newBucket.acl.private'),
'public-read': t('pages.manage.newBucket.acl.publicRead'),
'public-read-write': t('pages.manage.newBucket.acl.publicReadWrite'),
'authenticated-read': t('pages.manage.newBucket.acl.authenticatedRead')
}
}
'authenticated-read': t('pages.manage.newBucket.acl.authenticatedRead'),
},
},
},
options: ['BucketName', 'region', 'acl']
}
options: ['BucketName', 'region', 'acl'],
},
}

2
src/renderer/manage/utils/textfile.ts
View File

@@ -44,5 +44,5 @@ export const textFileExt = [
'.yaml',
'.yml',
'.yarnrc',
'license'
'license',
]

2
src/renderer/manage/utils/videofile.ts
View File

@@ -25,5 +25,5 @@ export const videoExt = [
'.rm',
'.rmvb',
'.wmv',
'.mkv'
'.mkv',
]

58
src/renderer/pages/Gallery.vue
View File

@@ -486,7 +486,7 @@ import {
SearchIcon,
SortAscIcon,
TrashIcon,
XIcon
XIcon,
} from 'lucide-vue-next'
import { computed, nextTick, onActivated, onBeforeMount, onBeforeUnmount, reactive, ref, watch } from 'vue'
import { useI18n } from 'vue-i18n'
@@ -522,12 +522,12 @@ const previewImageRef = ref<HTMLImageElement>()
const dialogVisible = ref(false)
const imgInfo = reactive({
id: '',
imgUrl: ''
imgUrl: '',
})
const choosedList: IObjT<boolean> = reactive({})
const gallerySliderControl = reactive({
visible: false,
index: 0
index: 0,
})
const deleteCloud = ref<boolean>(false)
const isAlwaysForceReload = ref<boolean>(false)
@@ -546,12 +546,12 @@ const pasteStyleMap = {
HTML: 'HTML',
URL: 'URL',
UBB: 'UBB',
Custom: 'Custom'
Custom: 'Custom',
}
const useShortUrl = ref<string>('')
const shortURLMap = {
[t('pages.gallery.shortUrl')]: t('pages.gallery.shortUrl'),
[t('pages.gallery.longUrl')]: t('pages.gallery.longUrl')
[t('pages.gallery.longUrl')]: t('pages.gallery.longUrl'),
}
const fileSortNameReverse = ref(false)
const fileSortTimeReverse = ref(false)
@@ -574,7 +574,7 @@ const gridBreakpoints = [
{ min: 768, cols: 3 },
{ min: 1024, cols: 4 },
{ min: 1280, cols: 6 },
{ min: 1536, cols: 7 }
{ min: 1536, cols: 7 },
]
const imageLoadStates = reactive<Record<string, boolean>>({})
@@ -591,7 +591,7 @@ const imagePreviewState = reactive({
startTranslateY: 0,
isSwipeMode: false,
swipeStartX: 0,
swipeThreshold: 100
swipeThreshold: 100,
})
const advancedRenameList = {
@@ -604,20 +604,20 @@ const advancedRenameList = {
{ label: t('pages.settings.upload.placeholder.minute'), value: '{i}' },
{ label: t('pages.settings.upload.placeholder.second'), value: '{s}' },
{ label: t('pages.settings.upload.placeholder.millisecond'), value: '{ms}' },
{ label: t('pages.settings.upload.placeholder.timestamp'), value: '{timestamp}' }
{ label: t('pages.settings.upload.placeholder.timestamp'), value: '{timestamp}' },
],
categoryHash: [
{ label: t('pages.settings.upload.placeholder.md5'), value: '{md5}' },
{ label: t('pages.settings.upload.placeholder.md5-16'), value: '{md5-16}' },
{ label: t('pages.settings.upload.placeholder.uuid'), value: '{uuid}' },
{ label: t('pages.settings.upload.placeholder.sha256'), value: '{sha256}' },
{ label: t('pages.settings.upload.placeholder.sha256-n'), value: '{sha256-n}' }
{ label: t('pages.settings.upload.placeholder.sha256-n'), value: '{sha256-n}' },
],
categoryFile: [
{ label: t('pages.settings.upload.placeholder.filename'), value: '{filename}' },
{ label: t('pages.settings.upload.placeholder.localFolder'), value: '{localFolder:n}' },
{ label: t('pages.settings.upload.placeholder.randomString'), value: '{str-n}' }
]
{ label: t('pages.settings.upload.placeholder.randomString'), value: '{str-n}' },
],
}
const matchedCount = computed(() => {
@@ -641,7 +641,7 @@ const dateRange = computed({
dateRangeStart.value = ''
dateRangeEnd.value = ''
}
}
},
})
function copyPlaceholder(placeholder: string) {
@@ -692,7 +692,7 @@ const imageTransformStyle = computed(() => {
return {
transform: `translate(${imagePreviewState.translateX}px, ${imagePreviewState.translateY}px) scale(${imagePreviewState.scale})`,
cursor: imagePreviewState.isDragging ? 'grabbing' : isDraggable ? 'grab' : 'default',
transition: 'none'
transition: 'none',
}
})
@@ -1068,7 +1068,7 @@ function getGallery(): IGalleryItem[] {
...item,
src: item.galleryPath || item.imgUrl || '',
key: item.id || `item-${index}`,
intro: item.fileName || ''
intro: item.fileName || '',
}
})
} else {
@@ -1077,7 +1077,7 @@ function getGallery(): IGalleryItem[] {
...item,
src: item.galleryPath || item.imgUrl || '',
key: item.id || `item-${index}`,
intro: item.fileName || ''
intro: item.fileName || '',
}
})
}
@@ -1188,7 +1188,7 @@ async function copy(item: ImgInfo) {
const result = await window.electron.triggerRPC<[string, string]>(IRPCActionType.GALLERY_PASTE_TEXT, getRawData(item))
if (result && result[1] && item.id) {
await $$db.updateById(item.id, {
shortUrl: result[1]
shortUrl: result[1],
})
updateGallery()
}
@@ -1205,7 +1205,7 @@ function remove(item: ImgInfo, _: number) {
type: 'warning',
confirmButtonText: t('common.confirm'),
cancelButtonText: t('common.cancel'),
center: true
center: true,
}).then(async result => {
if (!result) return
const file = await $$db.getById(item.id!)
@@ -1238,14 +1238,14 @@ function handleIsAlwaysForceReload(event: Event) {
const ev = (event.target as HTMLInputElement).checked
isAlwaysForceReload.value = ev
saveConfig({
[configPaths.settings.isAlwaysForceReload]: ev
[configPaths.settings.isAlwaysForceReload]: ev,
})
window.electron.sendRPC(IRPCActionType.REFRESH_SETTING_WINDOW)
}
function handleDeleteCloudFile(event: Event) {
saveConfig({
[configPaths.settings.deleteCloudFile]: (event.target as HTMLInputElement).checked
[configPaths.settings.deleteCloudFile]: (event.target as HTMLInputElement).checked,
})
}
@@ -1257,7 +1257,7 @@ function openDialog(item: ImgInfo) {
async function confirmModify() {
await $$db.updateById(imgInfo.id, {
imgUrl: imgInfo.imgUrl
imgUrl: imgInfo.imgUrl,
})
message.success(t('pages.gallery.operationSucceed'))
dialogVisible.value = false
@@ -1295,7 +1295,7 @@ function multiRemove() {
type: 'warning',
confirmButtonText: t('common.confirm'),
cancelButtonText: t('common.cancel'),
center: true
center: true,
}).then(async result => {
if (!result) return
const files: IResult<ImgInfo>[] = []
@@ -1311,13 +1311,13 @@ function multiRemove() {
const result = await ALLApi.delete(file)
if (result) {
message.success(`${file.fileName} ${t('pages.gallery.cloudDeleteSucceed')}`, {
duration: multiRemoveNumber > 5 ? 1000 : 2000
duration: multiRemoveNumber > 5 ? 1000 : 2000,
})
files.push(file)
await $$db.removeById(key)
} else {
message.error(`${file.fileName} ${t('pages.gallery.cloudDeleteFailed')}`, {
duration: multiRemoveNumber > 5 ? 1000 : 2000
duration: multiRemoveNumber > 5 ? 1000 : 2000,
})
}
} else {
@@ -1362,7 +1362,7 @@ async function multiCopy() {
copyString.push(result ? result[0] : '')
if (result && result[1] && item.id) {
await $$db.updateById(item.id, {
shortUrl: result[1]
shortUrl: result[1],
})
updateGallery()
}
@@ -1467,11 +1467,11 @@ function handleBatchRename() {
matchedFiles[i].newUrl = matchedFiles[i].newUrl.replaceAll('{auto}', (i + 1).toString())
}
const duplicateFilesNum = matchedFiles.filter(
(item: any) => matchedFiles.filter((item2: any) => item2.newUrl === item.newUrl).length > 1
(item: any) => matchedFiles.filter((item2: any) => item2.newUrl === item.newUrl).length > 1,
).length
const renamefunc = async (item: any) => {
await $$db.updateById(item.id, {
imgUrl: item.newUrl
imgUrl: item.newUrl,
})
}
const rename = () => {
@@ -1498,7 +1498,7 @@ function handleBatchRename() {
type: 'warning',
confirmButtonText: t('common.confirm'),
cancelButtonText: t('common.cancel'),
center: true
center: true,
})
.then(result => {
if (!result) return
@@ -1548,8 +1548,8 @@ onActivated(async () => {
export default {
name: 'GalleryPage',
components: {
VirtualScroller
}
VirtualScroller,
},
}
</script>

14
src/renderer/pages/MiniPage.vue
View File

@@ -5,7 +5,7 @@
:class="{
'is-dragover': dragover,
uploading: isShowingProgress,
linux: osGlobal === 'linux'
linux: osGlobal === 'linux',
}"
:style="{ backgroundPosition: '0 ' + progress + '%' }"
@drop.prevent="onDrop"
@@ -15,7 +15,7 @@
<img
v-if="!dragover && !isShowingProgress"
:src="logoPath ? logoPath : './squareLogo.png'"
style="width: 100%; height: 100%; border-radius: 50%"
style="border-radius: 50%; width: 100%; height: 100%"
draggable="false"
@dragstart.prevent
/>
@@ -110,8 +110,8 @@ function handleURLDrag(items: DataTransferItemList, dataTransfer: DataTransfer)
if (urlMatch) {
window.electron.sendRPC(IRPCActionType.UPLOAD_CHOOSED_FILES, [
{
path: urlMatch[1]
}
path: urlMatch[1],
},
])
}
}
@@ -132,7 +132,7 @@ function ipcSendFiles(files: FileList) {
Array.from(files).forEach(item => {
const obj = {
name: item.name,
path: window.electron.showFilePath(item)
path: window.electron.showFilePath(item),
}
sendFiles.push(obj)
})
@@ -157,7 +157,7 @@ function handleMouseMove(e: MouseEvent) {
x: xLoc,
y: yLoc,
width: 64,
height: 64
height: 64,
})
}
}
@@ -198,7 +198,7 @@ onBeforeUnmount(() => {
<script lang="ts">
export default {
name: 'MiniPage'
name: 'MiniPage',
}
</script>

40
src/renderer/pages/PicGoSetting.vue
View File

@@ -1303,7 +1303,7 @@ import {
RefreshCw,
RotateCcw,
Server,
Settings
Settings,
} from 'lucide-vue-next'
import type { IConfig } from 'piclist'
import pkg from 'root/package.json'
@@ -1339,20 +1339,20 @@ const tabs = computed(() => [
{ id: 'sync', label: t('pages.settings.sync.title'), icon: RotateCcw },
{ id: 'upload', label: t('pages.settings.upload.title'), icon: CloudUpload },
{ id: 'advanced', label: t('pages.settings.advanced.title'), icon: Server },
{ id: 'update', label: t('pages.settings.update.title'), icon: RefreshCw }
{ id: 'update', label: t('pages.settings.update.title'), icon: RefreshCw },
])
const shortUrlServerList = [
{ label: 'c1n', value: 'c1n' },
{ label: 'yourls', value: 'yourls' },
{ label: 'xyTom/Url-Shorten-Worker', value: 'cf_worker' },
{ label: 'ccbikai/Sink', value: 'sink' }
{ label: 'ccbikai/Sink', value: 'sink' },
]
const languageList = [
{ label: '简体中文', value: 'zh-CN' },
{ label: '繁體中文', value: 'zh-TW' },
{ label: 'English', value: 'en' }
{ label: 'English', value: 'en' },
]
const formOfSetting = ref<ISettingForm>({
@@ -1396,7 +1396,7 @@ const formOfSetting = ref<ISettingForm>({
proxy: '',
mainWindowWidth: 1200,
mainWindowHeight: 800,
enableSecondUploader: false
enableSecondUploader: false,
})
const proxy = ref('')
@@ -1432,7 +1432,7 @@ const autoWatchKeys = [
'autoCopy',
'encodeOutputURL',
'useShortUrl',
'enableSecondUploader'
'enableSecondUploader',
]
const addWatch = () => {
@@ -1441,7 +1441,7 @@ const addWatch = () => {
() => formOfSetting.value[key as keyof ISettingForm],
value => {
saveConfig({ [`settings.${key}`]: value })
}
},
)
})
@@ -1482,20 +1482,20 @@ const advancedRenameList = {
{ label: t('pages.settings.upload.placeholder.minute'), value: '{i}' },
{ label: t('pages.settings.upload.placeholder.second'), value: '{s}' },
{ label: t('pages.settings.upload.placeholder.millisecond'), value: '{ms}' },
{ label: t('pages.settings.upload.placeholder.timestamp'), value: '{timestamp}' }
{ label: t('pages.settings.upload.placeholder.timestamp'), value: '{timestamp}' },
],
categoryHash: [
{ label: t('pages.settings.upload.placeholder.md5'), value: '{md5}' },
{ label: t('pages.settings.upload.placeholder.md5-16'), value: '{md5-16}' },
{ label: t('pages.settings.upload.placeholder.uuid'), value: '{uuid}' },
{ label: t('pages.settings.upload.placeholder.sha256'), value: '{sha256}' },
{ label: t('pages.settings.upload.placeholder.sha256-n'), value: '{sha256-n}' }
{ label: t('pages.settings.upload.placeholder.sha256-n'), value: '{sha256-n}' },
],
categoryFile: [
{ label: t('pages.settings.upload.placeholder.filename'), value: '{filename}' },
{ label: t('pages.settings.upload.placeholder.localFolder'), value: '{localFolder:n}' },
{ label: t('pages.settings.upload.placeholder.randomString'), value: '{str-n}' }
]
{ label: t('pages.settings.upload.placeholder.randomString'), value: '{str-n}' },
],
}
function copyPlaceholder(placeholder: string) {
@@ -1529,7 +1529,7 @@ const logLevel = {
error: t('pages.settings.advanced.logLevelList.error'),
info: t('pages.settings.advanced.logLevelList.info'),
warn: t('pages.settings.advanced.logLevelList.warn'),
none: t('pages.settings.advanced.logLevelList.none')
none: t('pages.settings.advanced.logLevelList.none'),
}
const server = ref({ port: 36677, host: '0.0.0.0', enable: true })
@@ -1549,7 +1549,7 @@ const sync = ref<any>({
password: '',
authType: 'basic',
sslEnabled: true,
webdavSavePath: ''
webdavSavePath: '',
})
const syncType = ['github', 'gitee', 'gitea', 'webdav']
@@ -1571,7 +1571,7 @@ async function cancelSyncSetting() {
webdavPassword: '',
webdavAuthType: 'basic',
webdavSslEnabled: true,
webdavSavePath: ''
webdavSavePath: '',
}
}
@@ -1652,7 +1652,7 @@ async function initData() {
webdavPassword: '',
webdavAuthType: 'basic',
webdavSslEnabled: true,
webdavSavePath: ''
webdavSavePath: '',
}
formOfSetting.value.logFileSizeLimit = enforceNumber(settings.logFileSizeLimit) || 10
addProxyWatch()
@@ -1702,7 +1702,7 @@ function confirmCustomLink() {
async function handleCancelAdvancedRename() {
advancedRenameVisible.value = false
advancedRename.value = toRaw(
(await getConfig<any>(configPaths.buildIn.rename)) || { enable: false, format: '{filename}' }
(await getConfig<any>(configPaths.buildIn.rename)) || { enable: false, format: '{filename}' },
)
}
@@ -1722,7 +1722,7 @@ function handleMigrateFromPicGo() {
type: 'warning',
confirmButtonText: t('common.confirm'),
cancelButtonText: t('common.cancel'),
center: true
center: true,
}).then(result => {
if (result) {
window.electron
@@ -1871,7 +1871,7 @@ async function confirmWindowSize() {
const height = enforceNumber(formOfSetting.value.mainWindowHeight)
saveConfig({
[configPaths.settings.mainWindowWidth]: rawPicGoSize.value ? 800 : width < 100 ? 100 : width,
[configPaths.settings.mainWindowHeight]: rawPicGoSize.value ? 450 : height < 100 ? 100 : height
[configPaths.settings.mainWindowHeight]: rawPicGoSize.value ? 450 : height < 100 ? 100 : height,
})
await getMainWindowSize()
}
@@ -1906,7 +1906,7 @@ function confirmLogLevelSetting() {
}
saveConfig({
[configPaths.settings.logLevel]: formOfSetting.value.logLevel,
[configPaths.settings.logFileSizeLimit]: formOfSetting.value.logFileSizeLimit
[configPaths.settings.logFileSizeLimit]: formOfSetting.value.logFileSizeLimit,
})
logFileVisible.value = false
}
@@ -1940,7 +1940,7 @@ const syncTaskList = [
{ task: IRPCActionType.CONFIGURE_UPLOAD_ALL_CONFIG, label: t('pages.settings.sync.allConfig'), number: 4 },
{ task: IRPCActionType.CONFIGURE_DOWNLOAD_COMMON_CONFIG, label: t('pages.settings.sync.commonConfig'), number: 2 },
{ task: IRPCActionType.CONFIGURE_DOWNLOAD_MANAGE_CONFIG, label: t('pages.settings.sync.manageConfig'), number: 2 },
{ task: IRPCActionType.CONFIGURE_DOWNLOAD_ALL_CONFIG, label: t('pages.settings.sync.allConfig'), number: 4 }
{ task: IRPCActionType.CONFIGURE_DOWNLOAD_ALL_CONFIG, label: t('pages.settings.sync.allConfig'), number: 4 },
]
async function syncTaskFn(task: string, number: number) {

28
src/renderer/pages/Plugin.vue
View File

@@ -211,7 +211,7 @@ import {
SearchIcon,
SettingsIcon,
XCircleIcon,
XIcon
XIcon,
} from 'lucide-vue-next'
import { computed, onBeforeMount, onBeforeUnmount, reactive, ref, toRaw, watch } from 'vue'
import { useI18n } from 'vue-i18n'
@@ -223,7 +223,7 @@ import {
PICGO_CONFIG_PLUGIN,
PICGO_HANDLE_PLUGIN_DONE,
PICGO_HANDLE_PLUGIN_ING,
PICGO_TOGGLE_PLUGIN
PICGO_TOGGLE_PLUGIN,
} from '@/utils/constant'
import { getConfig, saveConfig } from '@/utils/dataSender'
import { IRPCActionType } from '@/utils/enum'
@@ -240,7 +240,7 @@ const dialogVisible = ref(false)
const pluginNameList = ref<string[]>([])
const loading = ref(true)
const needReload = ref(false)
const latestVersionMap = reactive<{ [key: string]: string }>({})
const latestVersionMap = reactive<Record<string, string>>({})
const $configForm = ref<InstanceType<typeof ConfigForm> | null>(null)
function setSrc(e: Event) {
@@ -351,7 +351,7 @@ const uninstallSuccessHandler = (plugin: string) => {
const picgoConfigPluginHandler = (
_currentType: 'plugin' | 'transformer' | 'uploader',
_configName: string,
_config: any
_config: any,
) => {
currentType.value = _currentType
configName.value = _configName
@@ -402,12 +402,12 @@ function reloadApp() {
async function handleReload() {
saveConfig({
needReload: true
needReload: true,
})
needReload.value = true
if ('Notification' in window) {
const successNotification = new Notification(t('pages.plugin.updateSuccess'), {
body: t('pages.plugin.needRestart')
body: t('pages.plugin.needRestart'),
})
successNotification.onclick = () => {
reloadApp()
@@ -425,23 +425,23 @@ async function handleConfirmConfig() {
switch (currentType.value) {
case 'plugin':
saveConfig({
[`${configName.value}`]: result
[`${configName.value}`]: result,
})
break
case 'uploader':
saveConfig({
[`picBed.${configName.value}`]: result
[`picBed.${configName.value}`]: result,
})
break
case 'transformer':
saveConfig({
[`transformer.${configName.value}`]: result
[`transformer.${configName.value}`]: result,
})
break
}
if ('Notification' in window) {
const successNotification = new Notification(t('pages.plugin.setResult'), {
body: t('pages.plugin.setSuccess')
body: t('pages.plugin.setSuccess'),
})
successNotification.onclick = () => {
return true
@@ -491,7 +491,7 @@ function handleSearchResult(item: INPMSearchResultObject) {
hasInstall: pluginNameList.value.some(plugin => plugin === pkg.name),
version: pkg.version,
gui,
ing: false // installing or uninstalling
ing: false, // installing or uninstalling
}
}
@@ -502,7 +502,7 @@ async function handleRestoreState(item: string, name: string) {
if (current === name) {
saveConfig({
[configPaths.picBed.current]: 'smms',
[configPaths.picBed.uploader]: 'smms'
[configPaths.picBed.uploader]: 'smms',
})
}
}
@@ -510,7 +510,7 @@ async function handleRestoreState(item: string, name: string) {
const current = await getConfig(configPaths.picBed.transformer)
if (current === name) {
saveConfig({
[configPaths.picBed.transformer]: 'path'
[configPaths.picBed.transformer]: 'path',
})
}
}
@@ -568,7 +568,7 @@ onBeforeUnmount(() => {
<script lang="ts">
export default {
name: 'PluginPage'
name: 'PluginPage',
}
</script>

92
src/renderer/pages/RenamePage.vue
View File

@@ -54,7 +54,7 @@ const validationError = ref<string>('')
const form = reactive({
fileName: '',
originName: ''
originName: '',
})
const handleFileName = (newName: string, _originName: string, _id: string) => {
@@ -114,29 +114,29 @@ onBeforeUnmount(() => {
</script>
<script lang="ts">
export default {
name: 'RenamePage'
name: 'RenamePage',
}
</script>
<style scoped>
.rename-container {
display: flex;
justify-content: center;
align-items: center;
padding: 2rem;
min-height: 100vh;
background: var(--color-background-secondary);
display: flex;
align-items: center;
justify-content: center;
}
.rename-card {
background: var(--color-background-primary);
border-radius: 12px;
box-shadow:
0 20px 25px -5px rgba(0, 0, 0, 0.1),
0 10px 10px -5px rgba(0, 0, 0, 0.04);
overflow: hidden;
border: 1px solid var(--color-border);
border-radius: 12px;
width: 100%;
max-width: 500px;
overflow: hidden;
background: var(--color-background-primary);
box-shadow:
0 20px 25px -5px rgb(0 0 0 / 10%),
0 10px 10px -5px rgb(0 0 0 / 4%);
}
/* Form */
@@ -167,58 +167,58 @@ export default {
}
.form-input {
width: 100%;
padding: 0.875rem 1rem;
padding-right: 2.5rem;
border: 1px solid var(--color-border);
border-radius: 8px;
background: var(--color-background-primary);
color: var(--color-text-primary);
padding: 0.875rem 1rem;
padding-right: 2.5rem;
width: 100%;
font-size: 0.875rem;
color: var(--color-text-primary);
background: var(--color-background-primary);
transition: all 0.2s ease;
box-sizing: border-box;
}
.form-input:focus {
outline: none;
border-color: var(--color-blue-common);
box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
outline: none;
box-shadow: 0 0 0 2px rgb(64 158 255 / 20%);
}
.form-input.input-error {
border-color: #f56c6c;
box-shadow: 0 0 0 2px rgba(245, 108, 108, 0.2);
box-shadow: 0 0 0 2px rgb(245 108 108 / 20%);
}
.input-clear {
position: absolute;
right: 0.75rem;
top: 50%;
transform: translateY(-50%);
right: 0.75rem;
display: flex;
align-items: center;
justify-content: center;
align-items: center;
border: none;
border-radius: 4px;
width: 24px;
height: 24px;
border-radius: 4px;
border: none;
background: var(--color-background-tertiary);
color: var(--color-text-secondary);
cursor: pointer;
background: var(--color-background-tertiary);
transition: all 0.2s ease;
transform: translateY(-50%);
cursor: pointer;
}
.input-clear:hover {
background: var(--color-background-secondary);
color: var(--color-text-primary);
background: var(--color-background-secondary);
}
.validation-error {
display: flex;
align-items: center;
margin-top: 0.5rem;
font-size: 0.75rem;
color: #f56c6c;
display: flex;
align-items: center;
gap: 0.25rem;
}
@@ -234,17 +234,17 @@ export default {
/* Buttons */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
border-radius: 8px;
align-items: center;
border: none;
border-radius: 8px;
padding: 0.75rem 1.5rem;
min-width: fit-content;
font-size: 0.875rem;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
min-width: fit-content;
gap: 0.5rem;
cursor: pointer;
}
.btn:disabled {
@@ -254,12 +254,12 @@ export default {
.btn:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
box-shadow: 0 4px 8px rgb(0 0 0 / 15%);
}
.btn-primary {
background: #409eff;
color: white;
background: #409eff;
}
.btn-primary:hover:not(:disabled) {
@@ -267,18 +267,18 @@ export default {
}
.btn-secondary {
background: var(--color-background-primary);
color: var(--color-text-primary);
border: 1px solid var(--color-border);
color: var(--color-text-primary);
background: var(--color-background-primary);
}
.btn-secondary:hover:not(:disabled) {
background: var(--color-background-secondary);
border-color: var(--color-accent);
background: var(--color-background-secondary);
}
/* Responsive Design */
@media (max-width: 768px) {
@media (width <= 768px) {
.rename-container {
padding: 1rem;
}
@@ -293,12 +293,12 @@ export default {
}
.btn {
width: 100%;
justify-content: center;
width: 100%;
}
}
@media (max-width: 480px) {
@media (width <= 480px) {
.rename-container {
padding: 0.75rem;
}
@@ -326,9 +326,11 @@ export default {
100% {
transform: translateX(0);
}
25% {
transform: translateX(-4px);
}
75% {
transform: translateX(4px);
}
@@ -342,7 +344,7 @@ export default {
:root.dark .rename-card,
:root.auto.dark .rename-card {
box-shadow:
0 20px 25px -5px rgba(0, 0, 0, 0.3),
0 10px 10px -5px rgba(0, 0, 0, 0.2);
0 20px 25px -5px rgb(0 0 0 / 30%),
0 10px 10px -5px rgb(0 0 0 / 20%);
}
</style>

6
src/renderer/pages/ShortKey.vue
View File

@@ -95,7 +95,7 @@
</div>
<div class="modal-footer">
<button class="btn btn-secondary" @click="cancelKeyBinding">
{{ $t('CANCEL') }}
{{ $t('common.cancel') }}
</button>
<button class="btn btn-primary" @click="confirmKeyBinding">
{{ $t('common.confirm') }}
@@ -131,7 +131,7 @@ onBeforeMount(async () => {
list.value = Object.keys(shortKeyConfig).map(item => {
return {
...shortKeyConfig[item],
from: calcOrigin(item)
from: calcOrigin(item),
}
})
})
@@ -189,7 +189,7 @@ onBeforeUnmount(() => {
<script lang="ts">
export default {
name: 'ShortkeyPage'
name: 'ShortkeyPage',
}
</script>

18
src/renderer/pages/Toolbox.vue
View File

@@ -65,7 +65,7 @@
'item-active': activeTypes.includes(key),
'item-error': item.status === IToolboxItemCheckStatus.ERROR,
'item-success': item.status === IToolboxItemCheckStatus.SUCCESS,
'item-loading': item.status === IToolboxItemCheckStatus.LOADING
'item-loading': item.status === IToolboxItemCheckStatus.LOADING,
}"
>
<div class="item-header" @click="toggleItem(key)">
@@ -124,11 +124,11 @@ const fixList = reactive<IToolboxMap>({
handlerText: t('pages.toolbox.openConfigFile'),
handler(value: string) {
window.electron.sendRPC(IRPCActionType.OPEN_FILE, value)
}
},
},
[IToolboxItemType.IS_GALLERY_FILE_BROKEN]: {
title: t('pages.toolbox.checkGalleryFileBroken'),
status: IToolboxItemCheckStatus.INIT
status: IToolboxItemCheckStatus.INIT,
},
[IToolboxItemType.HAS_PROBLEM_WITH_CLIPBOARD_PIC_UPLOAD]: {
title: t('pages.toolbox.checkProblemWithClipboardPicUpload'), // picgo-image-clipboard folder
@@ -136,13 +136,13 @@ const fixList = reactive<IToolboxMap>({
handlerText: t('pages.toolbox.openFilePath'),
handler(value: string) {
window.electron.sendRPC(IRPCActionType.OPEN_FILE, value)
}
},
},
[IToolboxItemType.HAS_PROBLEM_WITH_PROXY]: {
title: t('pages.toolbox.checkProblemWithProxy'),
status: IToolboxItemCheckStatus.INIT,
hasNoFixMethod: true
}
hasNoFixMethod: true,
},
})
const progress = computed(() => {
@@ -214,7 +214,7 @@ const handleFix = async () => {
})
.map(async key => {
return window.electron.triggerRPC<IToolboxCheckRes>(IRPCActionType.TOOLBOX_CHECK_FIX, key)
})
}),
)
fixRes
@@ -233,7 +233,7 @@ const handleFix = async () => {
type: 'warning',
confirmButtonText: t('common.confirm'),
cancelButtonText: t('common.cancel'),
center: true
center: true,
}).then(result => {
if (!result) return
window.electron.sendRPC(IRPCActionType.RELOAD_APP)
@@ -246,7 +246,7 @@ onUnmounted(() => {
</script>
<script lang="ts">
export default {
name: 'ToolBoxPage'
name: 'ToolBoxPage',
}
</script>

18
src/renderer/pages/TrayPage.vue
View File

@@ -95,7 +95,7 @@ type IResult<T> = T & {
const files = ref<IResult<ImgInfo>[]>([])
const notification = reactive({
title: t('pages.tray.copySuccess'),
body: ''
body: '',
})
const clipboardFiles = ref<ImgInfo[]>([])
@@ -116,7 +116,7 @@ const formatCustomLink = (customLink: string, item: ImgInfo) => {
const formatObj = {
url,
fileName,
extName
extName,
}
const keys = Object.keys(formatObj) as ['url', 'fileName', 'extName']
keys.forEach(item => {
@@ -160,8 +160,8 @@ async function pasteTemplate(style: string, item: ImgInfo, customLink: string |
UBB: `[IMG]${url}[/IMG]`,
Custom: formatCustomLink(_customLink, {
...item,
url
})
url,
}),
}
return tpl[style]
}
@@ -173,7 +173,7 @@ function disableDragFile() {
e = e || event
e.preventDefault()
},
false
false,
)
window.addEventListener(
'drop',
@@ -181,7 +181,7 @@ function disableDragFile() {
e = e || event
e.preventDefault()
},
false
false,
)
}
@@ -204,7 +204,7 @@ const dragFilesHandler = async (_files: string[]) => {
}
files.value = (await $$db.get<ImgInfo>({
orderBy: 'desc',
limit: 5
limit: 5,
}))!.data
}
@@ -215,7 +215,7 @@ const clipboardFilesHandler = (files: ImgInfo[]) => {
const uploadFilesHandler = async () => {
files.value = (await $$db.get<ImgInfo>({
orderBy: 'desc',
limit: 5
limit: 5,
}))!.data
uploadFlag.value = false
}
@@ -243,7 +243,7 @@ onBeforeUnmount(() => {
<script lang="ts">
export default {
name: 'TrayPage'
name: 'TrayPage',
}
</script>

28
src/renderer/pages/Upload.vue
View File

@@ -160,7 +160,7 @@ import {
LinkIcon,
Settings,
UploadCloudIcon,
XIcon
XIcon,
} from 'lucide-vue-next'
import { onBeforeMount, onBeforeUnmount, ref, watch } from 'vue'
import { useI18n } from 'vue-i18n'
@@ -200,7 +200,7 @@ const pasteFormatList = ref<Record<string, string>>({
[IPasteStyle.HTML]: '<img src="url"/>',
[IPasteStyle.URL]: 'http://test.com/test.png',
[IPasteStyle.UBB]: '[img]url[/img]',
[IPasteStyle.CUSTOM]: ''
[IPasteStyle.CUSTOM]: '',
})
watch(picBedGlobal, () => {
@@ -248,7 +248,7 @@ async function handlePicBedNameClick(_picBedName: string, picBedConfigName: stri
const currentPicBedConfig = ((await getConfig<any[]>(`uploader.${currentPicBed}`)) as any) || {}
const configList = await window.electron.triggerRPC<IUploaderConfigItem>(
IRPCActionType.PICBED_GET_CONFIG_LIST,
currentPicBed
currentPicBed,
)
const currentConfigList = configList?.configList ?? []
const config = currentConfigList.find((item: any) => item._configName === formatedpicBedConfigName)
@@ -256,11 +256,11 @@ async function handlePicBedNameClick(_picBedName: string, picBedConfigName: stri
name: PICBEDS_PAGE,
params: {
type: currentPicBed,
configId: config?._id || ''
configId: config?._id || '',
},
query: {
defaultConfigId: currentPicBedConfig.defaultId || ''
}
defaultConfigId: currentPicBedConfig.defaultId || '',
},
})
}
@@ -293,8 +293,8 @@ function handleURLDrag(items: DataTransferItemList, dataTransfer: DataTransfer)
if (urlMatch) {
window.electron.sendRPC(IRPCActionType.UPLOAD_CHOOSED_FILES, [
{
path: urlMatch[1]
}
path: urlMatch[1],
},
])
} else {
message.error(t('pages.upload.dragValidPictureOrUrl'))
@@ -315,7 +315,7 @@ function ipcSendFiles(files: FileList) {
Array.from(files).forEach(item => {
const obj = {
name: item.name,
path: window.electron.showFilePath(item)
path: window.electron.showFilePath(item),
}
sendFiles.push(obj)
})
@@ -334,14 +334,14 @@ async function getUseShortUrl() {
function updatePasteStyle(style: string) {
pasteStyle.value = style
saveConfig({
[configPaths.settings.pasteStyle]: style || IPasteStyle.MARKDOWN
[configPaths.settings.pasteStyle]: style || IPasteStyle.MARKDOWN,
})
}
function updateUrlType(shortUrl: boolean) {
useShortUrl.value = shortUrl
saveConfig({
[configPaths.settings.useShortUrl]: shortUrl
[configPaths.settings.useShortUrl]: shortUrl,
})
}
@@ -355,7 +355,7 @@ async function uploadURLFiles() {
value: isUrl(str) ? str : '',
title: t('pages.upload.inputUrlTip'),
placeholder: t('pages.upload.httpPrefixTip') + '\n' + t('pages.upload.multipleUrlsHint'),
multiLine: true
multiLine: true,
})
}
@@ -386,7 +386,7 @@ function handleInputBoxValue(val: string) {
? t('pages.upload.inputValidUrl') + ': ' + invalidUrls[0]
: t('pages.upload.invalidUrlsFound', {
count: invalidUrls.length,
urls: invalidUrls.slice(0, 3).join(', ') + (invalidUrls.length > 3 ? '...' : '')
urls: invalidUrls.slice(0, 3).join(', ') + (invalidUrls.length > 3 ? '...' : ''),
})
message.error(errorMessage)
}
@@ -434,7 +434,7 @@ onBeforeMount(() => {
<script lang="ts">
export default {
name: 'UploadPage'
name: 'UploadPage',
}
</script>

20
src/renderer/pages/UploaderConfigPage.vue
View File

@@ -103,7 +103,7 @@ async function selectItem(id: string) {
if (store?.state.defaultPicBed === type.value) {
window.electron.sendRPC(
IRPCActionType.TRAY_SET_TOOL_TIP,
`${type.value} ${curConfigList.value.find(item => item._id === id)?._configName || ''}`
`${type.value} ${curConfigList.value.find(item => item._id === id)?._configName || ''}`,
)
}
defaultConfigId.value = id
@@ -125,7 +125,7 @@ onBeforeMount(() => {
async function getCurrentConfigList() {
const configList = await window.electron.triggerRPC<IUploaderConfigItem>(
IRPCActionType.PICBED_GET_CONFIG_LIST,
type.value
type.value,
)
curConfigList.value = configList?.configList ?? []
defaultConfigId.value = configList?.defaultId ?? ''
@@ -136,11 +136,11 @@ function openEditPage(configId: string) {
name: PICBEDS_PAGE,
params: {
type: type.value,
configId
configId,
},
query: {
defaultConfigId: defaultConfigId.value
}
defaultConfigId: defaultConfigId.value,
},
})
}
@@ -155,7 +155,7 @@ async function deleteConfig(id: string) {
type: 'warning',
confirmButtonText: t('common.confirm'),
cancelButtonText: t('common.cancel'),
center: true
center: true,
})
if (!result) return
const res = await window.electron.triggerRPC<IUploaderConfigItem>(IRPCActionType.PICBED_DELETE_CONFIG, type.value, id)
@@ -170,15 +170,15 @@ function addNewConfig() {
name: PICBEDS_PAGE,
params: {
type: type.value,
configId: ''
}
configId: '',
},
})
}
function setDefaultPicBed(type: string) {
saveConfig({
[configPaths.picBed.current]: type,
[configPaths.picBed.uploader]: type
[configPaths.picBed.uploader]: type,
})
store?.setDefaultPicBed(type)
@@ -189,7 +189,7 @@ function setDefaultPicBed(type: string) {
</script>
<script lang="ts">
export default {
name: 'UploaderConfigPage'
name: 'UploaderConfigPage',
}
</script>

699
src/renderer/pages/css/Gallery.css
View File

File diff suppressed because it is too large Load Diff

342
src/renderer/pages/css/PicgoSetting.css
View File

@@ -1,9 +1,9 @@
.piclist-settings {
overflow-y: auto;
padding: 1.5rem;
min-height: 100vh;
background: var(--color-background-secondary);
color: var(--color-text-primary);
overflow-y: auto;
background: var(--color-background-secondary);
scrollbar-width: none;
-ms-overflow-style: none;
}
@@ -17,12 +17,12 @@
display: flex;
justify-content: space-between;
align-items: center;
background: var(--color-surface);
margin-bottom: 1.5rem;
border: 1px solid var(--color-border);
border-radius: 12px;
padding: 1.5rem;
margin-bottom: 1.5rem;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
border: 1px solid var(--color-border);
background: var(--color-surface);
box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
}
.header-content {
@@ -44,8 +44,8 @@
.settings-header p {
margin: 0;
color: var(--color-text-secondary);
font-size: 0.875rem;
color: var(--color-text-secondary);
}
.header-actions {
@@ -56,29 +56,29 @@
/* Tab Navigation */
.tab-navigation {
display: flex;
background: var(--color-background-primary);
margin-bottom: 1.5rem;
border: 1px solid var(--color-border);
border-radius: 12px;
padding: 0.25rem;
margin-bottom: 1.5rem;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
border: 1px solid var(--color-border);
background: var(--color-background-primary);
box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
}
.tab-button {
display: flex;
justify-content: center;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1rem;
background: transparent;
border: none;
border-radius: 8px;
color: var(--color-text-secondary);
padding: 0.75rem 1rem;
font-size: 0.875rem;
font-weight: 500;
cursor: pointer;
color: var(--color-text-secondary);
background: transparent;
transition: all 0.2s ease;
gap: 0.5rem;
cursor: pointer;
flex: 1;
justify-content: center;
}
.tab-button:hover {
@@ -87,9 +87,9 @@
}
.tab-button.active {
background: #409eff;
color: white;
box-shadow: 0 2px 4px rgba(64, 158, 255, 0.3);
background: #409eff;
box-shadow: 0 2px 4px rgb(64 158 255 / 30%);
}
/* Settings Content */
@@ -105,24 +105,24 @@
}
.settings-section {
background: var(--color-background-primary);
border: 1px solid var(--color-border);
border-radius: 12px;
padding: 1.5rem;
background: var(--color-background-primary);
box-shadow: 0 2px 8px var(--color-border);
border: 1px solid var(--color-border);
}
.settings-section h2 {
margin: 0 0 0.5rem 0;
margin: 0 0 0.5rem;
font-size: 1.125rem;
font-weight: 600;
color: var(--color-text-primary);
}
.settings-section p {
margin: 0 0 1.5rem 0;
color: var(--color-text-secondary);
margin: 0 0 1.5rem;
font-size: 0.875rem;
color: var(--color-text-secondary);
}
/* Form Elements */
@@ -134,7 +134,7 @@
margin-bottom: 0;
}
.form-group > label:not(.switch-label):not(.radio-option) {
.form-group > label:not(.switch-label, .radio-option) {
display: block;
margin-bottom: 0.5rem;
font-size: 0.875rem;
@@ -145,13 +145,13 @@
.form-input,
.form-textarea,
.form-select {
width: 100%;
padding: 0.75rem;
border: 1px solid var(--color-border);
border-radius: 8px;
background: var(--color-background-primary);
color: var(--color-text-primary);
padding: 0.75rem;
width: 100%;
font-size: 0.875rem;
color: var(--color-text-primary);
background: var(--color-background-primary);
transition: all 0.2s ease;
box-sizing: border-box;
}
@@ -159,50 +159,48 @@
.form-input:focus,
.form-textarea:focus,
.form-select:focus {
outline: none;
border-color: var(--color-blue-common);
box-shadow: 0 0 0 2px var(--el-color-primary-light-9, rgba(64, 158, 255, 0.2));
outline: none;
box-shadow: 0 0 0 2px var(--el-color-primary-light-9, rgb(64 158 255 / 20%));
}
.form-textarea {
resize: vertical;
min-height: 80px;
resize: vertical;
}
.form-range {
margin-bottom: 0.5rem;
border-radius: 3px;
width: 100%;
height: 6px;
border-radius: 3px;
background: #e4e7ed;
outline: none;
margin-bottom: 0.5rem;
-webkit-appearance: none;
appearance: none;
}
.form-range::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
border-radius: 50%;
width: 20px;
height: 20px;
border-radius: 50%;
background: #409eff;
appearance: none;
cursor: pointer;
}
.form-range::-moz-range-thumb {
border: none;
border-radius: 50%;
width: 20px;
height: 20px;
border-radius: 50%;
background: #409eff;
cursor: pointer;
border: none;
}
.range-value {
font-size: 0.875rem;
color: var(--color-text-secondary);
text-align: center;
color: var(--color-text-secondary);
}
/* Grid Layout */
@@ -216,18 +214,18 @@
.switch-label {
display: flex;
align-items: center;
gap: 0.75rem;
cursor: pointer;
padding: 1rem;
border: 1px solid var(--color-border-secondary);
border-radius: 8px;
padding: 1rem;
background: var(--color-background-tertiary);
transition: all 0.2s ease;
gap: 0.75rem;
cursor: pointer;
}
.switch-label:hover {
background: var(--color-background-secondary);
border-color: var(--color-border);
background: var(--color-background-secondary);
}
.switch-input {
@@ -238,24 +236,24 @@
.switch-slider {
position: relative;
border-radius: 12px;
width: 44px;
height: 24px;
background: var(--color-border);
border-radius: 12px;
transition: background-color 0.3s;
flex-shrink: 0;
}
.switch-slider::before {
content: '';
position: absolute;
top: 2px;
left: 2px;
border-radius: 50%;
width: 20px;
height: 20px;
background: white;
border-radius: 50%;
transition: transform 0.3s;
content: '';
}
.switch-input:checked + .switch-slider {
@@ -271,9 +269,9 @@
}
.switch-title {
margin-bottom: 0.25rem;
font-weight: 500;
color: var(--color-text-primary);
margin-bottom: 0.25rem;
}
.switch-description {
@@ -291,18 +289,18 @@
.radio-option {
display: flex;
align-items: center;
gap: 0.75rem;
cursor: pointer;
padding: 0.75rem;
border: 1px solid var(--color-border-secondary);
border-radius: 8px;
padding: 0.75rem;
background: var(--color-background-tertiary);
transition: all 0.2s ease;
gap: 0.75rem;
cursor: pointer;
}
.radio-option:hover {
background: var(--color-background-secondary);
border-color: var(--color-border);
background: var(--color-background-secondary);
}
.radio-input {
@@ -313,10 +311,10 @@
.radio-indicator {
position: relative;
width: 20px;
height: 20px;
border: 2px solid var(--color-border);
border-radius: 50%;
width: 20px;
height: 20px;
flex-shrink: 0;
}
@@ -325,14 +323,14 @@
}
.radio-input:checked + .radio-indicator::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
border-radius: 50%;
width: 10px;
height: 10px;
background: #409eff;
border-radius: 50%;
content: '';
transform: translate(-50%, -50%);
}
@@ -344,17 +342,17 @@
/* Buttons */
.btn {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.75rem 1rem;
border-radius: 8px;
align-items: center;
border: none;
border-radius: 8px;
padding: 0.75rem 1rem;
min-width: fit-content;
font-size: 0.875rem;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
min-width: fit-content;
gap: 0.5rem;
cursor: pointer;
}
.btn:disabled {
@@ -364,12 +362,12 @@
.btn:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
box-shadow: 0 4px 8px rgb(0 0 0 / 10%);
}
.btn-primary {
background: #409eff;
color: white;
background: #409eff;
}
.btn-primary:hover:not(:disabled) {
@@ -377,9 +375,9 @@
}
.btn-secondary {
background: var(--color-background-tertiary);
color: var(--color-text-primary);
border: 1px solid var(--color-border);
color: var(--color-text-primary);
background: var(--color-background-tertiary);
}
.btn-secondary:hover:not(:disabled) {
@@ -387,8 +385,8 @@
}
.btn-danger {
background: #f56c6c;
color: white;
background: #f56c6c;
}
.btn-danger:hover:not(:disabled) {
@@ -405,18 +403,18 @@
.checkbox-option {
display: flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
padding: 0.5rem 0.75rem;
border: 1px solid var(--color-border-secondary);
border-radius: 6px;
padding: 0.5rem 0.75rem;
background: var(--color-background-tertiary);
transition: all 0.2s ease;
gap: 0.5rem;
cursor: pointer;
}
.checkbox-option:hover {
background: var(--color-background-secondary);
border-color: var(--color-border);
background: var(--color-background-secondary);
}
.checkbox-input {
@@ -427,25 +425,25 @@
.checkbox-indicator {
position: relative;
width: 16px;
height: 16px;
border: 2px solid var(--color-border);
border-radius: 4px;
width: 16px;
height: 16px;
flex-shrink: 0;
}
.checkbox-input:checked + .checkbox-indicator {
background: #409eff;
border-color: #409eff;
background: #409eff;
}
.checkbox-input:checked + .checkbox-indicator::after {
content: '✓';
position: absolute;
top: 50%;
left: 50%;
color: white;
font-size: 10px;
color: white;
content: '✓';
transform: translate(-50%, -50%);
}
@@ -466,47 +464,44 @@
.input-addon-btn {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
align-items: center;
border: 1px solid var(--color-border);
border-radius: 8px;
background: var(--color-background-tertiary);
width: 40px;
color: var(--color-text-secondary);
cursor: pointer;
background: var(--color-background-tertiary);
transition: all 0.2s ease;
cursor: pointer;
}
.input-addon-btn:hover {
background: var(--color-background-secondary);
color: var(--color-text-primary);
background: var(--color-background-secondary);
}
/* Dialog Overlay */
.dialog-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.8);
display: flex;
align-items: center;
justify-content: center;
inset: 0;
z-index: 1000;
display: flex;
justify-content: center;
align-items: center;
background: rgb(0 0 0 / 80%);
}
.dialog {
background: var(--color-surface);
border-radius: var(--radius-2xl);
border: 1px solid var(--color-border);
box-shadow: var(--shadow-xl);
padding: 1.5rem;
max-width: 90vw;
width: 80vw;
max-height: 80vh;
overflow-y: auto;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
border: 1px solid var(--color-border);
border-radius: var(--radius-2xl);
padding: 1.5rem;
width: 80vw;
max-width: 90vw;
max-height: 80vh;
background: var(--color-surface);
box-shadow: var(--shadow-xl);
box-shadow: 0 10px 25px rgb(0 0 0 / 15%);
}
.dialog-header {
@@ -523,29 +518,29 @@
}
.dialog-close {
background: none;
display: flex;
justify-content: center;
align-items: center;
border: none;
font-size: 1.5rem;
cursor: pointer;
color: var(--color-text-secondary);
border-radius: 6px;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 6px;
font-size: 1.5rem;
color: var(--color-text-secondary);
background: none;
transition: all 0.2s ease;
cursor: pointer;
}
.dialog-close:hover {
background: var(--color-background-secondary);
color: var(--color-text-primary);
background: var(--color-background-secondary);
}
.dialog-content {
overflow-y: auto;
margin-bottom: 1.5rem;
padding: 0.2rem;
overflow-y: auto;
scrollbar-width: none;
-ms-overflow-style: none;
}
@@ -571,13 +566,13 @@
/* Notice Text */
.notice-text {
background: rgba(0, 128, 255, 0.1);
color: #1c2630ff;
padding: 1rem;
border-radius: 8px;
margin-bottom: 1rem;
text-align: center;
border-radius: 8px;
padding: 1rem;
font-size: 0.925rem;
text-align: center;
color: #1c2630ff;
background: rgb(0 128 255 / 10%);
}
/* Small text */
@@ -587,7 +582,7 @@ small {
}
/* Responsive Design */
@media (max-width: 768px) {
@media (width <= 768px) {
.piclist-settings {
padding: 1rem;
}
@@ -605,8 +600,8 @@ small {
}
.dialog {
width: 95%;
margin: 1rem;
width: 95%;
}
}
@@ -622,8 +617,8 @@ small {
:root.auto.dark .settings-header,
:root.auto.dark .tab-navigation,
:root.auto.dark .settings-section {
background: var(--color-background-secondary);
border-color: var(--color-border);
background: var(--color-background-secondary);
}
:root.dark .form-input,
@@ -632,9 +627,9 @@ small {
:root.auto.dark .form-input,
:root.auto.dark .form-textarea,
:root.auto.dark .form-select {
background: var(--color-background-tertiary);
border-color: var(--color-border);
color: var(--color-text-primary);
background: var(--color-background-tertiary);
}
:root.dark .switch-slider::before,
@@ -644,9 +639,9 @@ small {
:root.dark .btn-secondary,
:root.auto.dark .btn-secondary {
background: var(--color-background-tertiary);
border-color: var(--color-border);
color: var(--color-text-primary);
background: var(--color-background-tertiary);
}
:root.dark .btn-secondary:hover,
@@ -656,8 +651,8 @@ small {
:root.dark .switch-label,
:root.auto.dark .switch-label {
background: var(--color-background-tertiary);
border-color: var(--color-border);
background: var(--color-background-tertiary);
}
:root.dark .switch-label:hover,
@@ -669,8 +664,8 @@ small {
:root.dark .checkbox-option,
:root.auto.dark .radio-option,
:root.auto.dark .checkbox-option {
background: var(--color-background-tertiary);
border-color: var(--color-border);
background: var(--color-background-tertiary);
}
:root.dark .radio-option:hover,
@@ -687,14 +682,14 @@ small {
/* Placeholder Help Styles */
.placeholder-help {
background: var(--color-background-tertiary);
overflow-y: auto;
margin-top: 0.75rem;
border: 1px solid var(--color-border);
border-radius: 12px;
padding: 0;
margin-top: 0.75rem;
max-height: 400px;
overflow-y: auto;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
background: var(--color-background-tertiary);
box-shadow: 0 2px 8px rgb(0 0 0 / 6%);
}
.placeholder-category {
@@ -706,13 +701,13 @@ small {
}
.category-title {
margin: 0;
border-bottom: 1px solid var(--color-border-light);
padding: 0.875rem 1rem 0.5rem;
font-size: 0.875rem;
font-weight: 600;
color: var(--color-text-secondary);
padding: 0.875rem 1rem 0.5rem;
background: linear-gradient(135deg, var(--color-background-secondary) 0%, var(--color-background-tertiary) 100%);
border-bottom: 1px solid var(--color-border-light);
margin: 0;
letter-spacing: 0.02em;
}
@@ -726,37 +721,37 @@ small {
.placeholder-item {
display: flex;
align-items: center;
margin: 0;
border-radius: 0;
padding: 0.5rem 1rem;
font-size: 0.875rem;
line-height: 1.4;
border-radius: 0;
margin: 0;
}
.placeholder-item:hover {
background: rgba(var(--color-accent-rgb), 0.08);
background: rgb(var(--color-accent-rgb), 0.08);
}
.placeholder-item code {
background: var(--color-blue-common);
color: white;
padding: 0.3rem 0.6rem;
border-radius: 8px;
font-size: 1rem;
font-family: 'SF Mono', 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
margin-right: 0.875rem;
border: 1px solid rgb(255 255 255 / 20%);
border-radius: 8px;
padding: 0.3rem 0.6rem;
min-width: 80px;
text-align: center;
font-size: 1rem;
font-family: 'SF Mono', Monaco, Menlo, 'Ubuntu Mono', monospace;
font-weight: 600;
text-align: center;
color: white;
background: var(--color-blue-common);
box-shadow: 0 1px 3px rgb(0 0 0 / 12%), 0 1px 2px rgb(0 0 0 / 24%);
letter-spacing: 0.02em;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
border: 1px solid rgba(255, 255, 255, 0.2);
flex-shrink: 0;
}
.placeholder-item span {
color: var(--color-text-primary);
font-weight: 500;
color: var(--color-text-primary);
flex: 1;
}
@@ -766,13 +761,13 @@ small {
}
.placeholder-help::-webkit-scrollbar-track {
background: transparent;
border-radius: 10px;
background: transparent;
}
.placeholder-help::-webkit-scrollbar-thumb {
background: var(--color-border);
border-radius: 10px;
background: var(--color-border);
transition: background 0.2s ease;
}
@@ -783,15 +778,15 @@ small {
/* Dark theme adjustments */
:root.dark .placeholder-help,
:root.auto.dark .placeholder-help {
background: var(--color-background-secondary);
border-color: var(--color-border);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
background: var(--color-background-secondary);
box-shadow: 0 2px 8px rgb(0 0 0 / 20%);
}
:root.dark .category-title,
:root.auto.dark .category-title {
background: linear-gradient(135deg, var(--color-background-tertiary) 0%, var(--color-background-secondary) 100%);
border-bottom-color: var(--color-border);
background: linear-gradient(135deg, var(--color-background-tertiary) 0%, var(--color-background-secondary) 100%);
}
:root.dark .placeholder-category,
@@ -801,22 +796,22 @@ small {
:root.dark .placeholder-item:hover,
:root.auto.dark .placeholder-item:hover {
background: rgba(var(--color-accent-rgb), 0.12);
background: rgb(var(--color-accent-rgb), 0.12);
}
:root.dark .placeholder-item code,
:root.auto.dark .placeholder-item code {
border-color: rgb(255 255 255 / 15%);
background: var(--color-blue-common);
border-color: rgba(255, 255, 255, 0.15);
}
/* Update info and Release Notes Styles */
.update-info {
margin-bottom: 1.5rem;
border: 1px solid var(--color-border);
border-radius: 8px;
padding: 1rem;
background: var(--color-background);
border-radius: 8px;
border: 1px solid var(--color-border);
}
.update-info > div {
@@ -829,26 +824,26 @@ small {
}
.update-notice {
color: var(--color-success) !important;
font-weight: 500;
color: var(--color-success) !important;
}
/* Release Notes Card */
.release-notes-card {
background: var(--color-surface);
overflow: hidden;
border: 1px solid var(--color-border);
border-radius: 12px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
background: var(--color-surface);
box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
}
.release-notes-header {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid var(--color-border);
padding: 1rem 1.5rem;
background: var(--color-background);
border-bottom: 1px solid var(--color-border);
}
.release-notes-header h3 {
@@ -865,16 +860,16 @@ small {
.btn-sm {
padding: 0.375rem 0.75rem;
font-size: 0.875rem;
min-height: auto;
font-size: 0.875rem;
}
.btn-link {
background: transparent;
border: none;
color: var(--color-accent);
text-decoration: underline;
padding: 0.25rem;
text-decoration: underline;
color: var(--color-accent);
background: transparent;
}
.btn-link:hover {
@@ -883,9 +878,9 @@ small {
}
.release-notes-content {
background: var(--color-background);
max-height: 400px;
overflow-y: auto;
max-height: 400px;
background: var(--color-background);
scrollbar-width: thin;
scrollbar-color: var(--color-accent) transparent;
}
@@ -899,8 +894,8 @@ small {
}
.release-notes-content::-webkit-scrollbar-thumb {
background: var(--color-accent);
border-radius: 3px;
background: var(--color-accent);
}
.release-notes-content::-webkit-scrollbar-thumb:hover {
@@ -910,13 +905,13 @@ small {
.release-notes-loading,
.release-notes-error,
.release-notes-empty {
display: flex;
justify-content: center;
align-items: center;
padding: 2rem;
font-size: 0.925rem;
text-align: center;
color: var(--color-text-secondary);
font-size: 0.925rem;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
@@ -932,27 +927,27 @@ small {
.release-notes-pre {
margin: 0;
border: none;
padding: 1.5rem;
font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Consolas', monospace;
font-size: 0.875rem;
line-height: 1.6;
font-family: 'SF Mono', Monaco, Inconsolata, 'Roboto Mono', Consolas, monospace;
white-space: pre-wrap;
word-wrap: break-word;
color: var(--color-text-primary);
background: transparent;
border: none;
line-height: 1.6;
overflow-wrap: break-word;
}
.release-notes-footer {
padding: 0.75rem 1.5rem;
background: var(--color-background-secondary);
border-top: 1px solid var(--color-border);
padding: 0.75rem 1.5rem;
text-align: center;
background: var(--color-background-secondary);
}
.release-notes-footer small {
color: var(--color-text-secondary);
font-size: 0.75rem;
color: var(--color-text-secondary);
}
/* Rotation animation for loading icons */
@@ -960,6 +955,7 @@ small {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}

310
src/renderer/pages/css/PluginPage.css
View File

@@ -5,39 +5,39 @@ html, body {
/* Container */
.plugin-container {
display: flex;
overflow-y: auto;
margin: 0;
padding: 1rem;
width: 100%;
margin: 0;
display: flex;
min-height: 100vh;
flex-direction: column;
gap: 1.25rem;
min-height: 100vh;
box-sizing: border-box;
overflow-y: auto;
}
/* Card Base */
.plugin-card {
background: var(--color-surface);
overflow: hidden;
border: 1px solid var(--color-border-secondary);
border-radius: var(--radius-xl);
overflow: hidden;
transition: var(--transition-medium);
background: var(--color-surface);
box-shadow: var(--shadow-sm);
transition: var(--transition-medium);
}
.plugin-card:hover {
box-shadow: var(--shadow-md);
border-color: var(--color-border);
box-shadow: var(--shadow-md);
}
/* Header Card */
.header-card .card-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 1.5rem;
align-items: center;
border-bottom: 1px solid var(--color-border-secondary);
padding: 1rem 1.5rem;
flex-wrap: wrap;
gap: 1rem;
}
@@ -50,23 +50,23 @@ html, body {
}
.header-icon {
color: var(--color-accent);
display: flex;
align-items: center;
color: var(--color-accent);
}
.header-content h1 {
margin: 0;
font-size: 1.5rem;
font-weight: 600;
color: var(--color-text-primary);
margin: 0;
letter-spacing: -0.025em;
}
.header-content p {
margin: 0;
font-size: 0.875rem;
color: var(--color-text-secondary);
margin: 0;
}
.header-actions {
@@ -79,17 +79,17 @@ html, body {
.action-button {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.625rem 1rem;
background: var(--color-accent);
color: white;
border: none;
border-radius: var(--radius-md);
padding: 0.625rem 1rem;
font-size: 0.875rem;
font-weight: 500;
cursor: pointer;
transition: var(--transition-fast);
font-family: inherit;
font-weight: 500;
color: white;
background: var(--color-accent);
transition: var(--transition-fast);
gap: 0.5rem;
cursor: pointer;
}
.action-button:hover {
@@ -99,15 +99,15 @@ html, body {
}
.action-button.secondary {
background: var(--color-surface-elevated);
color: var(--color-text-primary);
border: 1px solid var(--color-border);
color: var(--color-text-primary);
background: var(--color-surface-elevated);
}
.action-button.secondary:hover {
background: var(--color-surface);
border-color: var(--color-accent);
color: var(--color-accent);
background: var(--color-surface);
}
.action-button.small {
@@ -133,26 +133,26 @@ html, body {
.search-icon {
position: absolute;
left: 1rem;
color: var(--color-text-secondary);
z-index: 1;
color: var(--color-text-secondary);
}
.search-input {
width: 100%;
padding: 0.75rem 1rem 0.75rem 3rem;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-surface-elevated);
color: var(--color-text-primary);
padding: 0.75rem 1rem 0.75rem 3rem;
width: 100%;
font-size: 0.875rem;
transition: var(--transition-fast);
font-family: inherit;
color: var(--color-text-primary);
background: var(--color-surface-elevated);
transition: var(--transition-fast);
}
.search-input:focus {
outline: none;
border-color: var(--color-accent);
box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.2);
outline: none;
box-shadow: 0 0 0 2px rgb(0 122 255 / 20%);
}
.search-input::placeholder {
@@ -162,27 +162,27 @@ html, body {
.clear-button {
position: absolute;
right: 0.5rem;
padding: 0.5rem;
background: transparent;
border: none;
color: var(--color-text-secondary);
cursor: pointer;
border-radius: var(--radius-md);
transition: var(--transition-fast);
display: flex;
align-items: center;
border: none;
border-radius: var(--radius-md);
padding: 0.5rem;
color: var(--color-text-secondary);
background: transparent;
transition: var(--transition-fast);
cursor: pointer;
}
.clear-button:hover {
background: var(--color-surface);
color: var(--color-text-primary);
background: var(--color-surface);
}
/* Notice Card */
.notice-card {
border-radius: var(--radius-lg);
border-color: var(--color-warning);
background: linear-gradient(135deg, rgba(255, 193, 7, 0.1) 0%, var(--color-surface) 100%);
border-radius: var(--radius-lg);
background: linear-gradient(135deg, rgb(255 193 7 / 10%) 0%, var(--color-surface) 100%);
}
.notice-content {
@@ -207,33 +207,30 @@ html, body {
/* Loading */
.loading-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1rem;
inset: 0;
z-index: 100;
display: flex;
justify-content: center;
align-items: center;
border-radius: var(--radius-xl);
background: rgb(0 0 0 / 50%);
flex-direction: column;
gap: 1rem;
}
.loading-spinner {
width: 40px;
height: 40px;
border: 3px solid var(--color-border);
border-top: 3px solid var(--color-accent);
border-radius: 50%;
width: 40px;
height: 40px;
animation: spin 1s linear infinite;
}
.loading-text {
color: white;
font-size: 0.875rem;
font-weight: 500;
color: white;
}
@keyframes spin {
@@ -252,13 +249,13 @@ html, body {
/* Plugin Item Card */
.plugin-item-card {
position: relative;
display: flex;
border-radius: var(--radius-lg);
padding: 1.5rem;
transition: var(--transition-medium);
display: flex;
flex-direction: column;
min-height: 200px;
height: auto;
min-height: 200px;
transition: var(--transition-medium);
flex-direction: column;
}
.plugin-item-card:hover {
@@ -276,22 +273,22 @@ html, body {
position: absolute;
top: 1rem;
right: 1rem;
z-index: 1;
border-radius: var(--radius-sm);
padding: 0.25rem 0.5rem;
font-size: 0.75rem;
font-weight: 600;
border-radius: var(--radius-sm);
z-index: 1;
}
.cli-badge {
background: var(--color-info);
color: var(--color-blue-common);
background: var(--color-info);
}
.update-badge {
background: var(--color-success);
color: white;
right: 3.5rem;
color: white;
background: var(--color-success);
}
/* Plugin Header */
@@ -303,12 +300,12 @@ html, body {
}
.plugin-logo {
border: 1px solid var(--color-border-secondary);
border-radius: var(--radius-md);
width: 48px;
height: 48px;
border-radius: var(--radius-md);
object-fit: cover;
flex-shrink: 0;
border: 1px solid var(--color-border-secondary);
}
.plugin-info {
@@ -317,18 +314,18 @@ html, body {
}
.plugin-name {
font-size: 1rem;
font-weight: 600;
color: var(--color-text-primary);
margin: 0 0 0.25rem 0;
cursor: pointer;
transition: var(--transition-fast);
display: flex;
align-items: center;
gap: 0.5rem;
text-overflow: ellipsis;
overflow: hidden;
margin: 0 0 0.25rem;
font-size: 1rem;
font-weight: 600;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--color-text-primary);
transition: var(--transition-fast);
cursor: pointer;
gap: 0.5rem;
}
.plugin-name:hover {
@@ -336,42 +333,42 @@ html, body {
}
.plugin-version {
border-radius: var(--radius-sm);
padding: 0.125rem 0.375rem;
font-size: 0.75rem;
font-weight: 400;
color: var(--color-text-secondary);
background: var(--color-surface-elevated);
padding: 0.125rem 0.375rem;
border-radius: var(--radius-sm);
}
.plugin-author {
font-size: 0.875rem;
color: var(--color-text-secondary);
margin: 0;
text-overflow: ellipsis;
overflow: hidden;
margin: 0;
font-size: 0.875rem;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--color-text-secondary);
}
/* Plugin Description */
.plugin-description {
margin-bottom: 1.5rem;
flex: 1;
display: flex;
align-items: flex-start;
margin-bottom: 1.5rem;
flex: 1;
}
.plugin-description p {
display: -webkit-box;
overflow: hidden;
margin: 0;
min-height: 2.6rem;
font-size: 0.875rem;
text-overflow: ellipsis;
color: var(--color-text-secondary);
line-height: 1.5;
margin: 0;
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
min-height: 2.6rem;
}
/* Plugin Actions */
@@ -383,16 +380,16 @@ html, body {
.plugin-button {
display: flex;
align-items: center;
gap: 0.5rem;
width: 100%;
padding: 0.75rem 1rem;
border: none;
border-radius: var(--radius-md);
padding: 0.75rem 1rem;
width: 100%;
font-size: 0.875rem;
font-weight: 500;
cursor: pointer;
transition: var(--transition-fast);
font-family: inherit;
font-weight: 500;
transition: var(--transition-fast);
gap: 0.5rem;
cursor: pointer;
}
.plugin-button:disabled {
@@ -401,8 +398,8 @@ html, body {
}
.install-button {
background: var(--color-success);
color: white;
background: var(--color-success);
}
.install-button:hover:not(:disabled) {
@@ -411,20 +408,20 @@ html, body {
.installing-button,
.processing-button {
background: var(--color-surface-elevated);
color: var(--color-text-secondary);
border: 1px solid var(--color-border);
color: var(--color-text-secondary);
background: var(--color-surface-elevated);
}
.installed-button {
background: var(--color-success-light);
color: var(--color-success);
border: 1px solid var(--color-success);
color: var(--color-success);
background: var(--color-success-light);
}
.settings-button {
background: var(--color-accent);
color: white;
background: var(--color-accent);
}
.settings-button:hover:not(:disabled) {
@@ -433,24 +430,24 @@ html, body {
}
.disabled-button {
background: var(--color-surface-elevated);
color: var(--color-text-secondary);
border: 1px solid var(--color-border);
color: var(--color-text-secondary);
background: var(--color-surface-elevated);
}
.disabled-button:hover:not(:disabled) {
background: var(--color-surface);
border-color: var(--color-warning);
color: var(--color-warning);
background: var(--color-surface);
}
/* Button Spinner */
.button-spinner {
border: 2px solid transparent;
border-top: 2px solid currentcolor;
border-radius: 50%;
width: 16px;
height: 16px;
border: 2px solid transparent;
border-top: 2px solid currentColor;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@@ -474,83 +471,80 @@ html, body {
}
.empty-content h3 {
margin: 0;
font-size: 1.125rem;
font-weight: 600;
color: var(--color-text-primary);
margin: 0;
}
.empty-content p {
font-size: 0.875rem;
color: var(--color-text-secondary);
margin: 0;
max-width: 400px;
font-size: 0.875rem;
color: var(--color-text-secondary);
}
/* Modal */
.modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
inset: 0;
z-index: 1000;
display: flex;
justify-content: center;
align-items: center;
background: rgb(0 0 0 / 50%);
}
.modal-container {
background: var(--color-surface);
display: flex;
margin: 2rem;
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-xl);
width: 100%;
max-width: 70vw;
max-height: 80vh;
width: 100%;
margin: 2rem;
display: flex;
background: var(--color-surface);
box-shadow: var(--shadow-xl);
flex-direction: column;
border: 1px solid var(--color-border);
}
.modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.5rem 1.5rem 0 1.5rem;
align-items: center;
padding: 1.5rem 1.5rem 0;
}
.modal-title {
margin: 0;
font-size: 1.25rem;
font-weight: 600;
color: var(--color-text-primary);
margin: 0;
}
.modal-close {
display: flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
background: transparent;
align-items: center;
border: none;
border-radius: var(--radius-md);
width: 2rem;
height: 2rem;
color: var(--color-text-secondary);
cursor: pointer;
background: transparent;
transition: var(--transition-fast);
cursor: pointer;
}
.modal-close:hover {
background: var(--color-surface-elevated);
color: var(--color-text-primary);
background: var(--color-surface-elevated);
}
.modal-content {
flex: 1;
padding: 1.5rem;
overflow-y: auto;
padding: 1.5rem;
flex: 1;
}
.modal-content::-webkit-scrollbar {
@@ -558,13 +552,13 @@ html, body {
}
.modal-content::-webkit-scrollbar-track {
background: var(--color-surface-elevated);
border-radius: 3px;
background: var(--color-surface-elevated);
}
.modal-content::-webkit-scrollbar-thumb {
background: var(--color-border);
border-radius: 3px;
background: var(--color-border);
}
.modal-content::-webkit-scrollbar-thumb:hover {
@@ -573,26 +567,26 @@ html, body {
.modal-footer {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 0.75rem;
padding: 1.5rem;
align-items: center;
border-top: 1px solid var(--color-border-secondary);
padding: 1.5rem;
gap: 0.75rem;
}
/* Buttons */
.btn {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
border: none;
border-radius: var(--radius-md);
padding: 0.75rem 1.5rem;
font-size: 0.875rem;
font-weight: 500;
cursor: pointer;
transition: var(--transition-fast);
font-family: inherit;
font-weight: 500;
transition: var(--transition-fast);
gap: 0.5rem;
cursor: pointer;
}
.btn:disabled {
@@ -606,8 +600,8 @@ html, body {
}
.btn-primary {
background: var(--color-accent);
color: white;
background: var(--color-accent);
}
.btn-primary:hover:not(:disabled) {
@@ -615,14 +609,14 @@ html, body {
}
.btn-secondary {
background: var(--color-surface-elevated);
color: var(--color-text-primary);
border: 1px solid var(--color-border);
color: var(--color-text-primary);
background: var(--color-surface-elevated);
}
.btn-secondary:hover:not(:disabled) {
background: var(--color-surface);
border-color: var(--color-accent);
background: var(--color-surface);
}
/* Transitions */
@@ -638,7 +632,7 @@ html, body {
}
/* Responsive Design */
@media (max-width: 768px) {
@media (width <= 768px) {
.plugin-container {
padding: 0.75rem;
gap: 1rem;
@@ -651,8 +645,8 @@ html, body {
}
.header-actions {
width: 100%;
justify-content: flex-start;
width: 100%;
flex-wrap: wrap;
}
@@ -661,17 +655,17 @@ html, body {
}
.modal-container {
max-width: 95vw;
margin: 1rem;
max-width: 95vw;
}
.action-button {
min-width: 120px;
justify-content: center;
min-width: 120px;
}
}
@media (max-width: 480px) {
@media (width <= 480px) {
.plugin-container {
padding: 0.5rem;
}
@@ -687,8 +681,8 @@ html, body {
}
.action-button {
width: 100%;
justify-content: center;
width: 100%;
}
}
@@ -700,15 +694,15 @@ html, body {
:root.dark .plugin-card,
:root.auto.dark .plugin-card {
background: var(--color-surface-elevated);
border-color: var(--color-border-secondary);
background: var(--color-surface-elevated);
}
:root.dark .search-input,
:root.auto.dark .search-input {
background: var(--color-surface-elevated);
border-color: var(--color-border);
color: var(--color-text-primary);
background: var(--color-surface-elevated);
}
:root.dark .search-input:focus,
@@ -718,20 +712,20 @@ html, body {
:root.dark .modal-container,
:root.auto.dark .modal-container {
background: var(--color-surface);
border-color: var(--color-border);
background: var(--color-surface);
}
:root.dark .btn-secondary,
:root.auto.dark .btn-secondary {
background: var(--color-surface-elevated);
border-color: var(--color-border);
background: var(--color-surface-elevated);
}
:root.dark .btn-secondary:hover,
:root.auto.dark .btn-secondary:hover {
background: var(--color-surface);
border-color: var(--color-accent);
background: var(--color-surface);
}
/* Accessibility */
@@ -755,7 +749,7 @@ html, body {
}
.plugin-name:focus-visible {
border-radius: var(--radius-sm);
outline: 2px solid var(--color-accent);
outline-offset: 2px;
border-radius: var(--radius-sm);
}

153
src/renderer/pages/css/ShortKey.css
View File

@@ -1,9 +1,9 @@
.shortkey-container {
overflow-y: auto;
padding: 1.5rem;
min-height: 100vh;
background: var(--color-background-secondary);
color: var(--color-text-primary);
overflow-y: auto;
background: var(--color-background-secondary);
scrollbar-width: none;
-ms-overflow-style: none;
}
@@ -17,12 +17,12 @@
display: flex;
justify-content: space-between;
align-items: center;
background: var(--color-surface);
margin-bottom: 1.5rem;
border: 1px solid var(--color-border);
border-radius: 12px;
padding: 1.5rem;
margin-bottom: 1.5rem;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
border: 1px solid var(--color-border);
background: var(--color-surface);
box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
}
.header-content {
@@ -44,17 +44,17 @@
.shortkey-header p {
margin: 0;
color: var(--color-text-secondary);
font-size: 0.875rem;
color: var(--color-text-secondary);
}
/* Card */
.shortkey-card {
background: var(--color-background-primary);
border-radius: 12px;
box-shadow: 0 2px 8px var(--color-border);
border: 1px solid var(--color-border);
overflow: hidden;
border: 1px solid var(--color-border);
border-radius: 12px;
background: var(--color-background-primary);
box-shadow: 0 2px 8px var(--color-border);
}
/* Table */
@@ -69,18 +69,18 @@
}
.shortkey-table th {
background: var(--color-background-tertiary);
color: var(--color-text-primary);
font-weight: 600;
font-size: 0.875rem;
padding: 1rem;
text-align: left;
border-bottom: 1px solid var(--color-border);
padding: 1rem;
font-size: 0.875rem;
font-weight: 600;
text-align: left;
color: var(--color-text-primary);
background: var(--color-background-tertiary);
}
.shortkey-table td {
padding: 1rem;
border-bottom: 1px solid var(--color-border-secondary);
padding: 1rem;
vertical-align: middle;
}
@@ -94,9 +94,9 @@
/* Table Cells */
.name-cell {
width: 25%;
font-weight: 500;
color: var(--color-text-primary);
width: 25%;
}
.key-cell {
@@ -109,20 +109,20 @@
}
.key-display {
background: var(--color-background-tertiary);
border: 1px solid var(--color-border);
border-radius: 6px;
padding: 0.25rem 0.5rem;
font-family: monospace;
font-size: 0.75rem;
font-family: monospace;
color: var(--color-text-primary);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
background: var(--color-background-tertiary);
box-shadow: 0 1px 2px rgb(0 0 0 / 10%);
}
.no-binding {
font-size: 0.875rem;
color: var(--color-text-secondary);
font-style: italic;
font-size: 0.875rem;
}
.status-cell {
@@ -131,22 +131,22 @@
.status-badge {
display: inline-block;
padding: 0.25rem 0.75rem;
border-radius: 12px;
padding: 0.25rem 0.75rem;
font-size: 0.75rem;
font-weight: 500;
}
.status-enabled {
background: rgba(103, 194, 58, 0.1);
border: 1px solid rgb(103 194 58 / 20%);
color: #67c23a;
border: 1px solid rgba(103, 194, 58, 0.2);
background: rgb(103 194 58 / 10%);
}
.status-disabled {
background: rgba(245, 108, 108, 0.1);
border: 1px solid rgb(245 108 108 / 20%);
color: #f56c6c;
border: 1px solid rgba(245, 108, 108, 0.2);
background: rgb(245 108 108 / 10%);
}
.source-cell {
@@ -154,8 +154,8 @@
}
.source-name {
color: var(--color-text-secondary);
font-size: 0.875rem;
color: var(--color-text-secondary);
}
.actions-cell {
@@ -171,18 +171,18 @@
/* Buttons */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.375rem;
padding: 0.5rem 0.875rem;
border-radius: 6px;
align-items: center;
border: none;
border-radius: 6px;
padding: 0.5rem 0.875rem;
min-width: fit-content;
font-size: 0.75rem;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
min-width: fit-content;
text-decoration: none;
transition: all 0.2s ease;
gap: 0.375rem;
cursor: pointer;
}
.btn:disabled {
@@ -192,7 +192,7 @@
.btn:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
box-shadow: 0 4px 8px rgb(0 0 0 / 15%);
}
.btn-sm {
@@ -201,8 +201,8 @@
}
.btn-primary {
background: #409eff;
color: white;
background: #409eff;
}
.btn-primary:hover:not(:disabled) {
@@ -210,19 +210,19 @@
}
.btn-secondary {
background: var(--color-background-tertiary);
color: var(--color-text-primary);
border: 1px solid var(--color-border);
color: var(--color-text-primary);
background: var(--color-background-tertiary);
}
.btn-secondary:hover:not(:disabled) {
background: var(--color-background-secondary);
border-color: var(--color-accent);
background: var(--color-background-secondary);
}
.btn-success {
background: #67c23a;
color: white;
background: #67c23a;
}
.btn-success:hover:not(:disabled) {
@@ -230,8 +230,8 @@
}
.btn-danger {
background: #f56c6c;
color: white;
background: #f56c6c;
}
.btn-danger:hover:not(:disabled) {
@@ -241,35 +241,32 @@
/* Modal */
.modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
inset: 0;
z-index: 1000;
display: flex;
justify-content: center;
align-items: center;
padding: 1rem;
background: rgb(0 0 0 / 50%);
}
.modal-content {
background: var(--color-background-primary);
border-radius: 12px;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
border: 1px solid var(--color-border);
max-width: 500px;
width: 100%;
max-height: 90vh;
overflow: hidden;
border: 1px solid var(--color-border);
border-radius: 12px;
width: 100%;
max-width: 500px;
max-height: 90vh;
background: var(--color-background-primary);
box-shadow: 0 20px 25px -5px rgb(0 0 0 / 10%), 0 10px 10px -5px rgb(0 0 0 / 4%);
}
.modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.5rem;
align-items: center;
border-bottom: 1px solid var(--color-border-secondary);
padding: 1.5rem;
}
.modal-title {
@@ -281,21 +278,21 @@
.modal-close {
display: flex;
align-items: center;
justify-content: center;
align-items: center;
border: none;
border-radius: 6px;
width: 32px;
height: 32px;
border-radius: 6px;
border: none;
background: var(--color-background-tertiary);
color: var(--color-text-secondary);
cursor: pointer;
background: var(--color-background-tertiary);
transition: all 0.2s ease;
cursor: pointer;
}
.modal-close:hover {
background: var(--color-background-secondary);
color: var(--color-text-primary);
background: var(--color-background-secondary);
}
.modal-body {
@@ -305,10 +302,10 @@
.modal-footer {
display: flex;
justify-content: flex-end;
gap: 0.75rem;
padding: 1rem 1.5rem;
border-top: 1px solid var(--color-border-secondary);
padding: 1rem 1.5rem;
background: var(--color-background-tertiary);
gap: 0.75rem;
}
/* Form Elements */
@@ -325,39 +322,39 @@
}
.form-input {
width: 100%;
padding: 0.75rem;
border: 1px solid var(--color-border);
border-radius: 8px;
background: var(--color-background-primary);
color: var(--color-text-primary);
padding: 0.75rem;
width: 100%;
font-size: 0.875rem;
color: var(--color-text-primary);
background: var(--color-background-primary);
transition: all 0.2s ease;
box-sizing: border-box;
}
.form-input:focus {
outline: none;
border-color: var(--color-blue-common);
box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
outline: none;
box-shadow: 0 0 0 2px rgb(64 158 255 / 20%);
}
.key-input {
font-family: monospace;
text-align: center;
font-weight: 600;
text-align: center;
letter-spacing: 0.5px;
}
.input-hint {
margin-top: 0.5rem;
font-size: 0.75rem;
color: var(--color-text-secondary);
text-align: center;
color: var(--color-text-secondary);
}
/* Responsive Design */
@media (max-width: 768px) {
@media (width <= 768px) {
.shortkey-container {
padding: 1rem;
}
@@ -398,7 +395,7 @@
}
}
@media (max-width: 480px) {
@media (width <= 480px) {
.shortkey-container {
padding: 0.75rem;
}

121
src/renderer/pages/css/ToolboxPage.css
View File

@@ -5,39 +5,39 @@ html, body {
/* Container */
.toolbox-container {
display: flex;
overflow-y: auto;
margin: 0;
padding: 1rem;
width: 100%;
margin: 0;
display: flex;
min-height: 100vh;
flex-direction: column;
gap: 1.25rem;
min-height: 100vh;
box-sizing: border-box;
overflow-y: auto;
}
/* Card Base */
.toolbox-card {
background: var(--color-surface);
overflow: hidden;
border: 1px solid var(--color-border-secondary);
border-radius: var(--radius-xl);
overflow: hidden;
transition: var(--transition-medium);
background: var(--color-surface);
box-shadow: var(--shadow-sm);
transition: var(--transition-medium);
}
.toolbox-card:hover {
box-shadow: var(--shadow-md);
border-color: var(--color-border);
box-shadow: var(--shadow-md);
}
/* Header Card */
.header-card .card-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 1.5rem;
align-items: center;
border-bottom: 1px solid var(--color-border-secondary);
padding: 1rem 1.5rem;
flex-wrap: wrap;
gap: 1rem;
}
@@ -50,9 +50,9 @@ html, body {
}
.header-logo {
border-radius: var(--radius-lg);
width: 48px;
height: 48px;
border-radius: var(--radius-lg);
object-fit: cover;
}
@@ -63,17 +63,17 @@ html, body {
}
.header-title {
margin: 0;
font-size: 1.5rem;
font-weight: 600;
color: var(--color-text-primary);
margin: 0;
letter-spacing: -0.025em;
}
.header-subtitle {
margin: 0;
font-size: 0.875rem;
color: var(--color-text-secondary);
margin: 0;
}
.header-actions {
@@ -85,20 +85,20 @@ html, body {
.action-button {
display: flex;
justify-content: center;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.25rem;
background: var(--color-accent);
color: white;
border: none;
border-radius: var(--radius-lg);
font-size: 0.875rem;
font-weight: 500;
cursor: pointer;
transition: var(--transition-fast);
font-family: inherit;
padding: 0.75rem 1.25rem;
min-width: 120px;
justify-content: center;
font-size: 0.875rem;
font-family: inherit;
font-weight: 500;
color: white;
background: var(--color-accent);
transition: var(--transition-fast);
gap: 0.5rem;
cursor: pointer;
}
.action-button:hover:not(.disabled) {
@@ -114,31 +114,31 @@ html, body {
}
.action-button.secondary {
background: var(--color-surface-elevated);
color: var(--color-text-primary);
border: 1px solid var(--color-border);
color: var(--color-text-primary);
background: var(--color-surface-elevated);
}
.action-button.secondary:hover {
background: var(--color-surface);
border-color: var(--color-accent);
color: var(--color-accent);
background: var(--color-surface);
}
.action-button.small {
padding: 0.5rem 0.75rem;
font-size: 0.75rem;
min-width: auto;
font-size: 0.75rem;
}
.success-tips {
padding: 0.75rem 1.25rem;
background: linear-gradient(135deg, rgba(103, 194, 58, 0.1) 0%, var(--color-surface) 100%);
border: 1px solid rgba(103, 194, 58, 0.3);
border: 1px solid rgb(103 194 58 / 30%);
border-radius: var(--radius-lg);
color: #67C23A;
padding: 0.75rem 1.25rem;
font-size: 0.875rem;
font-weight: 500;
color: #67C23A;
background: linear-gradient(135deg, rgb(103 194 58 / 10%) 0%, var(--color-surface) 100%);
}
.cant-fix-container {
@@ -149,8 +149,8 @@ html, body {
}
.cant-fix-text {
color: var(--color-text-secondary);
font-size: 0.875rem;
color: var(--color-text-secondary);
}
/* Progress Card */
@@ -159,37 +159,34 @@ html, body {
}
.progress-container {
padding: 1rem 1.5rem;
display: flex;
align-items: center;
padding: 1rem 1.5rem;
gap: 1rem;
}
.progress-bar {
flex: 1;
position: relative;
overflow: hidden;
border-radius: var(--radius-full);
height: 8px;
background: var(--color-surface-elevated);
border-radius: var(--radius-full);
overflow: hidden;
position: relative;
flex: 1;
}
.progress-fill {
position: relative;
border-radius: var(--radius-full);
height: 100%;
background: linear-gradient(90deg, var(--color-accent) 0%, var(--color-accent-hover) 100%);
border-radius: var(--radius-full);
transition: width 0.3s ease-in-out;
position: relative;
}
.progress-fill::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.2) 50%, transparent 100%);
inset: 0;
background: linear-gradient(90deg, transparent 0%, rgb(255 255 255 / 20%) 50%, transparent 100%);
content: '';
animation: shimmer 2s infinite;
}
@@ -199,11 +196,11 @@ html, body {
}
.progress-text {
min-width: 40px;
font-size: 0.875rem;
font-weight: 600;
color: var(--color-text-primary);
min-width: 40px;
text-align: right;
color: var(--color-text-primary);
}
/* Items Card */
@@ -212,10 +209,10 @@ html, body {
}
.card-title {
margin: 0;
font-size: 1.125rem;
font-weight: 600;
color: var(--color-text-primary);
margin: 0;
}
.items-list {
@@ -253,15 +250,15 @@ html, body {
.item-header {
display: flex;
align-items: center;
justify-content: space-between;
align-items: center;
padding: 1rem 1.5rem;
cursor: pointer;
transition: var(--transition-fast);
cursor: pointer;
}
.item-header:hover {
background: rgba(0, 0, 0, 0.02);
background: rgb(0 0 0 / 2%);
}
.item-title {
@@ -275,10 +272,10 @@ html, body {
}
.item-chevron {
color: var(--color-text-secondary);
transition: var(--transition-fast);
display: flex;
align-items: center;
color: var(--color-text-secondary);
transition: var(--transition-fast);
}
.item-active .item-chevron {
@@ -288,33 +285,33 @@ html, body {
.item-content-enter-active,
.item-content-leave-active {
transition: all 0.3s ease;
overflow: hidden;
transition: all 0.3s ease;
}
.item-content-enter-from,
.item-content-leave-to {
opacity: 0;
max-height: 0;
opacity: 0;
}
.item-content-enter-to,
.item-content-leave-from {
opacity: 1;
max-height: 200px;
opacity: 1;
}
.item-content {
padding: 0 1.5rem 1rem;
border-top: 1px solid var(--color-border-secondary);
padding: 0 1.5rem 1rem;
background: var(--color-surface);
}
.item-message {
color: var(--color-text-secondary);
font-size: 0.875rem;
line-height: 1.5;
margin-bottom: 0.75rem;
font-size: 0.875rem;
color: var(--color-text-secondary);
line-height: 1.5;
}
.item-actions {
@@ -323,7 +320,7 @@ html, body {
}
/* Responsive Design */
@media (max-width: 768px) {
@media (width <= 768px) {
.toolbox-container {
padding: 0.75rem;
gap: 1rem;
@@ -366,6 +363,6 @@ html, body {
/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
.item-header:hover {
background: rgba(255, 255, 255, 0.05);
background: rgb(255 255 255 / 5%);
}
}

211
src/renderer/pages/css/UploadPage.css
View File

@@ -5,30 +5,30 @@ html, body {
/* Container */
.upload-container {
display: flex;
overflow-y: auto;
margin: 0;
padding: 1rem;
width: 100%;
margin: 0;
display: flex;
min-height: 100vh;
flex-direction: column;
gap: 1.25rem;
min-height: 100vh;
box-sizing: border-box;
overflow-y: auto;
}
/* Card Base */
.upload-card {
background: var(--color-background-secondary);
overflow: hidden;
border: 1px solid var(--color-border-secondary);
border-radius: var(--radius-xl);
overflow: hidden;
transition: var(--transition-medium);
background: var(--color-background-secondary);
box-shadow: var(--shadow-sm);
transition: var(--transition-medium);
}
.upload-card:hover {
box-shadow: var(--shadow-md);
border-color: var(--color-border);
box-shadow: var(--shadow-md);
}
/* Compact cards styling */
@@ -45,10 +45,10 @@ html, body {
/* Header Card */
.header-card .card-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 1.5rem;
align-items: center;
border-bottom: 1px solid var(--color-border-secondary);
padding: 1rem 1.5rem;
flex-wrap: wrap;
gap: 1rem;
}
@@ -60,24 +60,24 @@ html, body {
.provider-button {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem 1rem;
background: var(--color-surface-elevated);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
cursor: pointer;
transition: var(--transition-fast);
font-family: inherit;
padding: 0.75rem 1rem;
width: auto;
min-width: 200px;
font-family: inherit;
background: var(--color-surface-elevated);
transition: var(--transition-fast);
gap: 0.75rem;
cursor: pointer;
flex-shrink: 0;
}
.provider-button:hover {
background: var(--color-surface);
border-color: var(--color-accent);
transform: translateY(-1px);
background: var(--color-surface);
box-shadow: var(--shadow-sm);
transform: translateY(-1px);
}
.provider-info {
@@ -119,17 +119,17 @@ html, body {
.action-button {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.625rem 1rem;
background: var(--color-accent);
color: white;
border: none;
border-radius: var(--radius-md);
padding: 0.625rem 1rem;
font-size: 0.875rem;
font-weight: 500;
cursor: pointer;
transition: var(--transition-fast);
font-family: inherit;
font-weight: 500;
color: white;
background: var(--color-accent);
transition: var(--transition-fast);
gap: 0.5rem;
cursor: pointer;
}
.action-button:hover {
@@ -139,15 +139,15 @@ html, body {
}
.action-button.secondary {
background: var(--color-surface-elevated);
color: var(--color-text-primary);
border: 1px solid var(--color-border);
color: var(--color-text-primary);
background: var(--color-surface-elevated);
}
.action-button.secondary:hover {
background: var(--color-surface);
border-color: var(--color-accent);
color: var(--color-accent);
background: var(--color-surface);
}
/* Main Upload Card */
@@ -157,19 +157,19 @@ html, body {
.upload-zone {
position: relative;
padding: 3rem 2rem;
cursor: pointer;
transition: var(--transition-medium);
margin: 1rem;
border: 2px dashed var(--color-border);
border-radius: var(--radius-xl);
padding: 3rem 2rem;
background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-background-secondary) 100%);
margin: 1rem;
transition: var(--transition-medium);
cursor: pointer;
}
.upload-zone:hover,
.upload-zone.drag-active {
border-color: var(--color-accent);
background: linear-gradient(135deg, var(--color-surface-elevated) 0%, rgba(0, 122, 255, 0.05) 100%);
background: linear-gradient(135deg, var(--color-surface-elevated) 0%, rgb(0 122 255 / 5%) 100%);
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
}
@@ -183,14 +183,14 @@ html, body {
}
.upload-icon {
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
width: 80px;
height: 80px;
border-radius: 50%;
background: linear-gradient(135deg, var(--color-accent) 0%, rgba(0, 122, 255, 0.8) 100%);
display: flex;
align-items: center;
justify-content: center;
color: white;
background: linear-gradient(135deg, var(--color-accent) 0%, rgb(0 122 255 / 80%) 100%);
transition: var(--transition-medium);
}
@@ -201,17 +201,17 @@ html, body {
}
.upload-title {
margin: 0;
font-size: 1.25rem;
font-weight: 600;
color: var(--color-text-primary);
margin: 0;
letter-spacing: -0.025em;
}
.upload-subtitle {
margin: 0;
font-size: 0.875rem;
color: var(--color-text-secondary);
margin: 0;
}
.upload-formats {
@@ -232,24 +232,24 @@ html, body {
/* Progress */
.progress-container {
margin: 1rem 1.5rem;
border: 1px solid var(--color-border-secondary);
border-radius: var(--radius-lg);
padding: 1rem;
background: var(--color-surface-elevated);
border-radius: var(--radius-lg);
border: 1px solid var(--color-border-secondary);
}
.progress-bar {
height: 6px;
background: var(--color-border-secondary);
border-radius: 3px;
overflow: hidden;
margin-bottom: 0.5rem;
border-radius: 3px;
height: 6px;
background: var(--color-border-secondary);
}
.progress-fill {
border-radius: 3px;
height: 100%;
background: linear-gradient(90deg, var(--color-accent) 0%, var(--color-primary) 100%);
border-radius: 3px;
transition: width var(--transition-medium);
}
@@ -258,54 +258,54 @@ html, body {
}
.progress-text {
display: block;
font-size: 0.875rem;
font-weight: 500;
color: var(--color-text-secondary);
text-align: center;
display: block;
color: var(--color-text-secondary);
}
/* Quick Actions Card */
.card-header {
padding: 1rem 1.5rem;
border-bottom: 1px solid var(--color-border-secondary);
padding: 1rem 1.5rem;
}
.card-title {
margin: 0;
font-size: 0.9rem;
font-weight: 600;
color: var(--color-text-primary);
margin: 0;
letter-spacing: -0.025em;
}
.quick-actions {
padding: 1rem 1.5rem;
display: grid;
padding: 1rem 1.5rem;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 0.75rem;
}
.quick-action-button {
display: flex;
flex-direction: row;
align-items: center;
gap: 0.5rem;
padding: 0.875rem 1rem;
background: var(--color-surface-elevated);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
cursor: pointer;
transition: var(--transition-medium);
padding: 0.875rem 1rem;
font-family: inherit;
text-align: left;
background: var(--color-surface-elevated);
transition: var(--transition-medium);
flex-direction: row;
gap: 0.5rem;
cursor: pointer;
}
.quick-action-button:hover {
background: var(--color-surface);
border-color: var(--color-accent);
transform: translateY(-2px);
background: var(--color-surface);
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}
.quick-action-button span {
@@ -316,8 +316,8 @@ html, body {
/* Settings Card */
.settings-content {
padding: 1.25rem 1.5rem;
display: flex;
padding: 1.25rem 1.5rem;
flex-direction: column;
gap: 1.5rem;
}
@@ -328,7 +328,7 @@ html, body {
gap: 0.75rem;
}
@media (min-width: 768px) {
@media (width >= 768px) {
.settings-content {
display: grid;
grid-template-columns: 1fr 1fr;
@@ -341,11 +341,11 @@ html, body {
}
}
@media (min-width: 1024px) {
@media (width >= 1024px) {
.upload-container {
margin: 0 auto;
padding: 1.5rem 2rem;
max-width: 1200px;
margin: 0 auto;
}
.quick-actions {
@@ -358,10 +358,10 @@ html, body {
}
.setting-label {
margin: 0;
font-size: 0.875rem;
font-weight: 500;
color: var(--color-text-primary);
margin: 0;
}
.format-buttons {
@@ -371,16 +371,16 @@ html, body {
}
.format-button {
padding: 0.4rem 0.75rem;
background: var(--color-surface-elevated);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: 0.4rem 0.75rem;
font-size: 0.7rem;
font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
font-weight: 500;
color: var(--color-text-secondary);
cursor: pointer;
background: var(--color-surface-elevated);
transition: var(--transition-fast);
font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
cursor: pointer;
}
.format-button:hover {
@@ -389,31 +389,31 @@ html, body {
}
.format-button.active {
background: var(--color-accent);
border-color: var(--color-accent);
color: white;
background: var(--color-accent);
}
.url-toggle {
display: flex;
background: var(--color-surface-elevated);
overflow: hidden;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
overflow: hidden;
width: 100%;
background: var(--color-surface-elevated);
}
.toggle-button {
flex: 1;
padding: 0.625rem 0.875rem;
background: transparent;
border: none;
padding: 0.625rem 0.875rem;
font-size: 0.8rem;
font-family: inherit;
font-weight: 500;
color: var(--color-text-secondary);
cursor: pointer;
background: transparent;
transition: var(--transition-fast);
font-family: inherit;
flex: 1;
cursor: pointer;
}
.toggle-button:hover {
@@ -421,8 +421,8 @@ html, body {
}
.toggle-button.active {
background: var(--color-accent);
color: white;
background: var(--color-accent);
}
.toggle-button:first-child.active {
@@ -438,66 +438,66 @@ html, body {
/* Modal */
.modal-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
padding: 2rem;
align-items: center;
overflow-y: auto;
padding: 2rem;
background: rgb(0 0 0 / 50%);
inset: 0;
}
.modal-container {
background: var(--color-surface);
border-radius: var(--radius-2xl);
border: 1px solid var(--color-border);
box-shadow: var(--shadow-xl);
max-width: 90vw;
width: 80vw;
height: 80vh;
max-height: 90vh;
overflow: hidden;
margin: auto;
border: 1px solid var(--color-border);
border-radius: var(--radius-2xl);
width: 80vw;
max-width: 90vw;
height: 80vh;
max-height: 90vh;
background: var(--color-surface);
box-shadow: var(--shadow-xl);
}
.modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.5rem 2rem;
align-items: center;
border-bottom: 1px solid var(--color-border-secondary);
padding: 1.5rem 2rem;
}
.modal-title {
margin: 0;
font-size: 1.25rem;
font-weight: 600;
color: var(--color-text-primary);
margin: 0;
}
.modal-close {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
background: var(--color-surface-elevated);
align-items: center;
border: 1px solid var(--color-border);
border-radius: 50%;
cursor: pointer;
width: 32px;
height: 32px;
color: var(--color-text-secondary);
background: var(--color-surface-elevated);
cursor: pointer;
}
.modal-close:hover {
background: var(--color-surface);
border-color: var(--color-danger);
color: var(--color-danger);
background: var(--color-surface);
}
.modal-content {
padding: 0.2rem;
overflow-y: auto;
padding: 0.2rem;
max-height: calc(90vh - 120px);
scrollbar-width: none;
-ms-overflow-style: none;
@@ -521,7 +521,7 @@ html, body {
/* Responsive Design */
@media (max-width: 768px) {
@media (width <= 768px) {
.upload-container {
padding: 0.75rem;
gap: 1rem;
@@ -547,8 +547,8 @@ html, body {
}
.upload-zone {
padding: 2rem 1rem;
margin: 0.75rem;
padding: 2rem 1rem;
}
.upload-icon {
@@ -581,7 +581,7 @@ html, body {
}
}
@media (max-width: 480px) {
@media (width <= 480px) {
.upload-container {
padding: 0.5rem;
}
@@ -605,8 +605,8 @@ html, body {
}
.provider-button {
min-width: unset;
width: 100%;
min-width: unset;
}
}
@@ -620,14 +620,15 @@ html, body {
:root.dark .upload-zone.drag-active,
:root.auto.dark .upload-zone:hover,
:root.auto.dark .upload-zone.drag-active {
background: linear-gradient(135deg, var(--color-surface) 0%, rgba(0, 122, 255, 0.1) 100%);
background: linear-gradient(135deg, var(--color-surface) 0%, rgb(0 122 255 / 10%) 100%);
}
/* Animation for upload icon */
@keyframes float {
0%, 100% {
transform: translateY(0px);
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}

102
src/renderer/pages/css/UploaderConfigPage.css
View File

@@ -1,49 +1,49 @@
/* Container */
.config-container {
display: flex;
overflow-y: auto;
margin: 0;
padding: 1rem;
width: 100%;
margin: 0;
display: flex;
min-height: 100vh;
flex-direction: column;
gap: 1.25rem;
min-height: 100vh;
box-sizing: border-box;
overflow-y: auto;
}
/* Card Base */
.config-card {
background: var(--color-surface);
overflow: hidden;
border: 1px solid var(--color-border-secondary);
border-radius: var(--radius-xl);
overflow: hidden;
transition: var(--transition-medium);
background: var(--color-surface);
box-shadow: var(--shadow-sm);
transition: var(--transition-medium);
}
.config-card:hover {
box-shadow: var(--shadow-md);
border-color: var(--color-border);
box-shadow: var(--shadow-md);
}
/* Header Card */
.header-card .card-header {
padding: 1.5rem 2rem;
border-bottom: 1px solid var(--color-border-secondary);
padding: 1.5rem 2rem;
}
.page-title {
margin: 0;
font-size: 1.5rem;
font-weight: 600;
color: var(--color-text-primary);
margin: 0;
letter-spacing: -0.025em;
}
/* Main Card */
.main-card {
background: var( --color-background-secondary);
padding: 1.5rem;
background: var( --color-background-secondary);
}
.config-grid {
@@ -53,14 +53,14 @@
width: 100%;
}
@media (max-width: 768px) {
@media (width <= 768px) {
.config-grid {
grid-template-columns: 1fr;
gap: 0.75rem;
}
}
@media (min-width: 1200px) {
@media (width >= 1200px) {
.config-grid {
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 1.25rem;
@@ -69,24 +69,24 @@
/* Config Items */
.config-item {
background: var(--color-surface-elevated);
position: relative;
display: flex;
justify-content: space-between;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: 1.25rem;
cursor: pointer;
transition: var(--transition-medium);
position: relative;
min-height: 120px;
display: flex;
background: var(--color-surface-elevated);
transition: var(--transition-medium);
cursor: pointer;
flex-direction: column;
justify-content: space-between;
}
.config-item:hover {
background: var(--color-surface);
border-color: var(--color-accent);
transform: translateY(-2px);
background: var(--color-surface);
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}
.config-item.selected {
@@ -101,28 +101,28 @@
}
.config-name {
margin-bottom: 0.5rem;
font-size: 1rem;
font-weight: 600;
color: var(--color-text-primary);
margin-bottom: 0.5rem;
line-height: 1.4;
}
.config-update-time {
margin-bottom: 0.75rem;
font-size: 0.875rem;
color: var(--color-text-secondary);
margin-bottom: 0.75rem;
}
.default-badge {
display: inline-flex;
align-items: center;
border-radius: var(--radius-md);
padding: 0.25rem 0.75rem;
background: var(--color-accent);
color: white;
font-size: 0.75rem;
font-weight: 500;
border-radius: var(--radius-md);
color: white;
background: var(--color-accent);
text-transform: uppercase;
letter-spacing: 0.025em;
}
@@ -137,16 +137,16 @@
.action-btn {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
background: var(--color-surface-elevated);
align-items: center;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
cursor: pointer;
transition: var(--transition-fast);
width: 32px;
height: 32px;
color: var(--color-text-secondary);
background: var(--color-surface-elevated);
transition: var(--transition-fast);
cursor: pointer;
}
.action-btn:hover {
@@ -172,12 +172,12 @@
/* Add New Config Item */
.config-item-add {
border: 2px dashed var(--color-border);
background: var(--color-surface);
display: flex;
align-items: center;
justify-content: center;
align-items: center;
border: 2px dashed var(--color-border);
min-height: 120px;
background: var(--color-surface);
}
.config-item-add:hover {
@@ -210,27 +210,27 @@
}
.card-actions {
padding: 1.25rem 1.5rem;
display: flex;
justify-content: center;
padding: 1.25rem 1.5rem;
}
.primary-button {
display: flex;
justify-content: center;
align-items: center;
gap: 0.5rem;
padding: 0.875rem 2rem;
background: var(--color-accent);
color: white;
border: none;
border-radius: var(--radius-lg);
font-size: 0.875rem;
font-weight: 500;
cursor: pointer;
transition: var(--transition-fast);
font-family: inherit;
padding: 0.875rem 2rem;
min-width: 200px;
justify-content: center;
font-size: 0.875rem;
font-family: inherit;
font-weight: 500;
color: white;
background: var(--color-accent);
transition: var(--transition-fast);
gap: 0.5rem;
cursor: pointer;
}
.primary-button:hover:not(:disabled) {
@@ -240,15 +240,15 @@
}
.primary-button:disabled {
background: var(--color-border);
color: var(--color-text-secondary);
background: var(--color-border);
box-shadow: none;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
/* Responsive Design */
@media (max-width: 768px) {
@media (width <= 768px) {
.config-container {
padding: 0.75rem;
gap: 1rem;
@@ -287,10 +287,10 @@
}
}
@media (min-width: 1024px) {
@media (width >= 1024px) {
.config-container {
margin: 0 auto;
padding: 1.5rem 2rem;
max-width: 1200px;
margin: 0 auto;
}
}

168
src/renderer/pages/picbeds/index.vue
View File

@@ -153,7 +153,7 @@ const handleConfirm = async () => {
IRPCActionType.UPLOADER_UPDATE_CONFIG,
type.value,
rawResult?._id,
rawResult
rawResult,
)
message.success(t('pages.picBedConfigs.setSuccess'))
$router.back()
@@ -263,41 +263,41 @@ async function handleCopyApi() {
<script lang="ts">
export default {
name: 'PicbedsPage'
name: 'PicbedsPage',
}
</script>
<style scoped>
#picbeds-page {
min-height: 100vh;
background: var(--color-background-tertiar);
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
position: relative;
min-height: 100vh;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: var(--color-background-tertiar);
}
.page-container {
max-width: 1000px;
margin: 0 auto;
padding: 2rem;
max-width: 1000px;
}
.page-content {
background: var(--color-background-secondary);
border-radius: 16px;
box-shadow:
0 8px 8px rgba(0, 0, 0, 0.12),
0 4px 8px rgba(0, 0, 0, 0.08);
overflow: auto;
border: 1px solid rgba(255, 255, 255, 0.2);
border: 1px solid rgb(255 255 255 / 20%);
border-radius: 16px;
background: var(--color-background-secondary);
box-shadow:
0 8px 8px rgb(0 0 0 / 12%),
0 4px 8px rgb(0 0 0 / 8%);
}
/* Header Section */
.page-header {
display: flex;
align-items: center;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid rgb(229 231 235 / 80%);
padding: 2rem 2rem 1.5rem;
border-bottom: 1px solid rgba(229, 231, 235, 0.8);
background: var(--color-background-secondary);
}
@@ -308,16 +308,15 @@ export default {
}
.page-title {
margin: 0;
font-size: 1.5rem;
font-weight: 600;
color: #1f2937;
margin: 0;
cursor: pointer;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
background: linear-gradient(135deg, #1f2937 0%, #4b5563 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer;
-webkit-text-fill-color: transparent;
}
.page-title:hover {
@@ -327,38 +326,38 @@ export default {
.link-button {
display: flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
align-items: center;
border: none;
border-radius: 8px;
background: rgba(59, 130, 246, 0.1);
width: 2rem;
height: 2rem;
color: #3b82f6;
cursor: pointer;
background: rgb(59 130 246 / 10%);
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer;
}
.link-button:hover {
background: rgba(59, 130, 246, 0.2);
background: rgb(59 130 246 / 20%);
transform: translateY(-1px);
}
/* Action Buttons */
.action-button {
position: relative;
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
overflow: hidden;
border: none;
border-radius: 12px;
padding: 0.75rem 1.5rem;
font-size: 0.875rem;
font-weight: 500;
cursor: pointer;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
font-family: inherit;
position: relative;
overflow: hidden;
font-weight: 500;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
gap: 0.5rem;
cursor: pointer;
}
.action-button::before {
@@ -368,7 +367,7 @@ export default {
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
background: linear-gradient(90deg, transparent, rgb(255 255 255 / 20%), transparent);
transition: left 0.6s;
}
@@ -377,48 +376,48 @@ export default {
}
.action-button.primary {
background: var(--color-blue-common);
color: white;
box-shadow: 0 2px 2px rgba(0, 122, 255, 0.3);
background: var(--color-blue-common);
box-shadow: 0 2px 2px rgb(0 122 255 / 30%);
}
.action-button.primary:hover {
transform: translateY(-2px);
box-shadow: 0 2px 4px rgba(0, 122, 255, 0.4);
box-shadow: 0 2px 4px rgb(0 122 255 / 40%);
}
.action-button.secondary {
background: var(--color-surface-elevated);
color: #475569;
border: 1px solid #e2e8f0;
color: #475569;
background: var(--color-surface-elevated);
}
.action-button.secondary:hover {
background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
transform: translateY(-1px);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
box-shadow: 0 4px 6px rgb(0 0 0 / 10%);
}
.action-button.success {
background: var(--color-success);
color: white;
box-shadow: 0 4px 4px rgba(16, 185, 129, 0.3);
background: var(--color-success);
box-shadow: 0 4px 4px rgb(16 185 129 / 30%);
}
.action-button.success:hover {
transform: translateY(-2px);
box-shadow: 0 8px 6px rgba(16, 185, 129, 0.4);
box-shadow: 0 8px 6px rgb(16 185 129 / 40%);
}
.action-button.warning {
background: var(--color-warning);
color: white;
position: relative;
color: white;
background: var(--color-warning);
}
.action-button.warning:hover {
transform: translateY(-1px);
box-shadow: 0 4px 6px rgba(245, 158, 11, 0.3);
box-shadow: 0 4px 6px rgb(245 158 11 / 30%);
}
.dropdown-arrow {
@@ -458,17 +457,17 @@ export default {
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
right: 0;
left: 0;
z-index: 1000;
overflow: hidden;
overflow-y: auto;
margin-top: 0.5rem;
background: white;
border: 1px solid #e5e7eb;
border-radius: 12px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
overflow: hidden;
z-index: 1000;
max-height: 300px;
overflow-y: auto;
background: white;
box-shadow: 0 8px 32px rgb(0 0 0 / 12%);
}
.dropdown-menu.dropdown-up {
@@ -480,20 +479,20 @@ export default {
.dropdown-item {
display: block;
width: 100%;
padding: 0.75rem 1rem;
border: none;
background: transparent;
color: #374151;
padding: 0.75rem 1rem;
width: 100%;
font-size: 0.875rem;
cursor: pointer;
transition: all 0.2s ease;
text-align: left;
color: #374151;
background: transparent;
transition: all 0.2s ease;
cursor: pointer;
}
.dropdown-item:hover {
background: #f3f4f6;
color: #007aff;
background: #f3f4f6;
}
.dropdown-item:last-child {
@@ -507,57 +506,54 @@ export default {
}
.empty-content {
max-width: 400px;
margin: 0 auto;
max-width: 400px;
}
.empty-icon {
color: #9ca3af;
margin-bottom: 1.5rem;
color: #9ca3af;
}
.empty-content h3 {
margin: 0 0 0.5rem;
font-size: 1.25rem;
font-weight: 600;
color: #374151;
margin: 0 0 0.5rem;
}
.empty-content p {
color: #6b7280;
margin: 0;
color: #6b7280;
line-height: 1.6;
}
/* Loading Overlay */
.loading-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1rem;
inset: 0;
z-index: 2000;
display: flex;
justify-content: center;
align-items: center;
background: rgb(0 0 0 / 50%);
flex-direction: column;
gap: 1rem;
}
.loading-spinner {
width: 2.5rem;
height: 2.5rem;
border: 3px solid rgba(255, 255, 255, 0.3);
border: 3px solid rgb(255 255 255 / 30%);
border-top: 3px solid white;
border-radius: 50%;
width: 2.5rem;
height: 2.5rem;
animation: spin 1s linear infinite;
}
.loading-text {
color: white;
font-size: 0.875rem;
font-weight: 500;
color: white;
}
/* Transitions */
@@ -583,6 +579,7 @@ export default {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
@@ -596,34 +593,33 @@ export default {
:root.dark .page-content,
:root.auto.dark .page-content {
border-color: rgb(75 85 99 / 30%);
background: var(--color-background-secondary);
border-color: rgba(75, 85, 99, 0.3);
}
:root.dark .page-header,
:root.auto.dark .page-header {
border-color: rgb(75 85 99 / 30%);
background: var(--color-background-secondary);
border-color: rgba(75, 85, 99, 0.3);
}
:root.dark .page-title,
:root.auto.dark .page-title {
background: linear-gradient(135deg, #f9fafb 0%, #d1d5db 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
:root.dark .dropdown-menu,
:root.auto.dark .dropdown-menu {
background: #374151;
border-color: #4b5563;
background: #374151;
}
:root.dark .dropdown-menu.dropdown-up,
:root.auto.dark .dropdown-menu.dropdown-up {
background: #374151;
border-color: #4b5563;
background: #374151;
}
:root.dark .dropdown-item,
@@ -633,12 +629,12 @@ export default {
:root.dark .dropdown-item:hover,
:root.auto.dark .dropdown-item:hover {
background: #4b5563;
color: #60a5fa;
background: #4b5563;
}
/* Responsive Design */
@media (max-width: 768px) {
@media (width <= 768px) {
.page-container {
padding: 1rem;
}
@@ -660,19 +656,19 @@ export default {
}
.action-button {
width: 100%;
justify-content: center;
width: 100%;
}
.toast {
top: 1rem;
right: 1rem;
left: 1rem;
top: 1rem;
min-width: auto;
}
}
@media (max-width: 480px) {
@media (width <= 480px) {
.page-container {
padding: 0.5rem;
}

46
src/renderer/router/index.ts
View File

@@ -25,17 +25,17 @@ export default createRouter({
{
path: '/',
name: config.TRAY_PAGE,
component: TrayPage
component: TrayPage,
},
{
path: '/rename-page',
name: config.RENAME_PAGE,
component: RenamePage
component: RenamePage,
},
{
path: '/mini-page',
name: config.MINI_PAGE,
component: MiniPage
component: MiniPage,
},
{
path: '/main-page',
@@ -45,7 +45,7 @@ export default createRouter({
{
path: 'upload',
component: UploadPage,
name: config.UPLOAD_PAGE
name: config.UPLOAD_PAGE,
},
{
path: 'manage-main-page',
@@ -55,68 +55,68 @@ export default createRouter({
{
path: '',
name: config.MANAGE_EMPTY_PAGE,
component: ManageEmptyPage
component: ManageEmptyPage,
},
{
path: 'manage-setting-page',
name: config.MANAGE_SETTING_PAGE,
component: ManageSettingPage
component: ManageSettingPage,
},
{
path: 'manage-bucket-page',
name: config.MANAGE_BUCKET_PAGE,
component: ManageBucketPage
}
]
component: ManageBucketPage,
},
],
},
{
path: 'manage-login-page',
name: config.MANAGE_LOGIN_PAGE,
component: ManageLoginPage
component: ManageLoginPage,
},
{
path: 'picbeds/:type/:configId?',
name: config.PICBEDS_PAGE,
component: PicBedsPage
component: PicBedsPage,
},
{
path: 'gallery',
component: GalleryPage,
name: config.GALLERY_PAGE,
meta: {
keepAlive: true
}
keepAlive: true,
},
},
{
path: 'settings',
name: config.SETTING_PAGE,
component: SettingPage
component: SettingPage,
},
{
path: 'plugins',
component: PluginPage,
name: config.PLUGIN_PAGE
name: config.PLUGIN_PAGE,
},
{
path: 'shortKey',
component: ShortKeyPage,
name: config.SHORTKEY_PAGE
name: config.SHORTKEY_PAGE,
},
{
path: 'uploader-config-page/:type',
component: UploaderConfigPage,
name: config.UPLOADER_CONFIG_PAGE
}
]
name: config.UPLOADER_CONFIG_PAGE,
},
],
},
{
path: '/toolbox-page',
name: config.TOOLBOX_CONFIG_PAGE,
component: Toolbox
component: Toolbox,
},
{
path: '/:pathMatch(.*)*',
redirect: '/main-page/upload'
}
]
redirect: '/main-page/upload',
},
],
})

8
src/renderer/store/index.ts
View File

@@ -16,14 +16,14 @@ export const storeKey: InjectionKey<IStore> = Symbol('store')
// state
const state: IState = reactive({
defaultPicBed: 'smms'
defaultPicBed: 'smms',
})
// methods
const setDefaultPicBed = (type: string) => {
saveConfig({
[configPaths.picBed.current]: type,
[configPaths.picBed.uploader]: type
[configPaths.picBed.uploader]: type,
})
state.defaultPicBed = type
}
@@ -32,7 +32,7 @@ export const store = {
install(app: App) {
app.provide(storeKey, {
state: readonly(state),
setDefaultPicBed
setDefaultPicBed,
})
}
},
}

20
src/renderer/utils/configPaths.ts
View File

@@ -17,14 +17,12 @@ import type {
ITcYunConfig,
IUploaderConfig,
IUpYunConfig,
IWebdavPlistConfig
IWebdavPlistConfig,
} from '#/types/types'
export type manualPageOpenType = 'window' | 'browser'
interface IPicGoPlugins {
[key: `picgo-plugin-${string}`]: boolean
}
type IPicGoPlugins = Record<`picgo-plugin-${string}`, boolean>
export interface IConfigStruct {
picBed: {
@@ -48,9 +46,7 @@ export interface IConfigStruct {
[others: string]: any
}
settings: {
shortKey: {
[key: string]: IShortKeyConfig
}
shortKey: Record<string, IShortKeyConfig>
isAlwaysForceReload: boolean
logLevel: string[]
logPath: string
@@ -133,12 +129,12 @@ export const configPaths = {
secondUploaderConfig: 'picBed.secondUploaderConfig',
proxy: 'picBed.proxy',
transformer: 'picBed.transformer',
list: 'picBed.list'
list: 'picBed.list',
},
settings: {
shortKey: {
_path: 'settings.shortKey',
'picgo:upload': 'settings.shortKey[picgo:upload]'
'picgo:upload': 'settings.shortKey[picgo:upload]',
},
isAlwaysForceReload: 'settings.isAlwaysForceReload',
logLevel: 'settings.logLevel',
@@ -194,7 +190,7 @@ export const configPaths = {
autoImport: 'settings.autoImport',
autoImportPicBed: 'settings.autoImportPicBed',
galleryPicBedFilter: 'settings.galleryPicBedFilter',
enableSecondUploader: 'settings.enableSecondUploader'
enableSecondUploader: 'settings.enableSecondUploader',
},
needReload: 'needReload',
picgoPlugins: 'picgoPlugins',
@@ -203,8 +199,8 @@ export const configPaths = {
compress: 'buildIn.compress',
watermark: 'buildIn.watermark',
rename: 'buildIn.rename',
skipProcess: 'buildIn.skipProcess'
skipProcess: 'buildIn.skipProcess',
},
debug: 'debug',
PICGO_ENV: 'PICGO_ENV'
PICGO_ENV: 'PICGO_ENV',
}

14
src/renderer/utils/enum.ts
View File

@@ -3,7 +3,7 @@ export const IPasteStyle = {
HTML: 'HTML',
URL: 'URL',
UBB: 'UBB',
CUSTOM: 'Custom'
CUSTOM: 'Custom',
}
export const IWindowList = {
@@ -11,7 +11,7 @@ export const IWindowList = {
TRAY_WINDOW: 'TRAY_WINDOW',
MINI_WINDOW: 'MINI_WINDOW',
RENAME_WINDOW: 'RENAME_WINDOW',
TOOLBOX_WINDOW: 'TOOLBOX_WINDOW'
TOOLBOX_WINDOW: 'TOOLBOX_WINDOW',
}
export const IRPCActionType = {
@@ -133,32 +133,32 @@ export const IRPCActionType = {
MANAGE_OPEN_DOWNLOADED_FOLDER: 'MANAGE_OPEN_DOWNLOADED_FOLDER',
MANAGE_OPEN_LOCAL_FILE: 'MANAGE_OPEN_LOCAL_FILE',
MANAGE_DOWNLOAD_FILE_FROM_URL: 'MANAGE_DOWNLOAD_FILE_FROM_URL',
MANAGE_CONVERT_PATH_TO_BASE64: 'MANAGE_CONVERT_PATH_TO_BASE64'
MANAGE_CONVERT_PATH_TO_BASE64: 'MANAGE_CONVERT_PATH_TO_BASE64',
}
export const IToolboxItemType = {
IS_CONFIG_FILE_BROKEN: 'IS_CONFIG_FILE_BROKEN',
IS_GALLERY_FILE_BROKEN: 'IS_GALLERY_FILE_BROKEN',
HAS_PROBLEM_WITH_CLIPBOARD_PIC_UPLOAD: 'HAS_PROBLEM_WITH_CLIPBOARD_PIC_UPLOAD',
HAS_PROBLEM_WITH_PROXY: 'HAS_PROBLEM_WITH_PROXY'
HAS_PROBLEM_WITH_PROXY: 'HAS_PROBLEM_WITH_PROXY',
}
export const IToolboxItemCheckStatus = {
INIT: 'init',
LOADING: 'loading',
SUCCESS: 'success',
ERROR: 'error'
ERROR: 'error',
}
export const ISartMode = {
QUIET: 'quiet',
MINI: 'mini',
MAIN: 'main',
NO_TRAY: 'no-tray'
NO_TRAY: 'no-tray',
}
export const II18nLanguage = {
ZH_CN: 'zh-CN',
ZH_TW: 'zh-TW',
EN: 'en'
EN: 'en',
}

2
src/renderer/utils/key-binding.ts
View File

@@ -10,7 +10,7 @@ const keyBinding = (event: KeyboardEvent) => {
Ctrl: event.ctrlKey,
Shift: event.shiftKey,
Alt: event.altKey,
[meta]: event.metaKey
[meta]: event.metaKey,
}
const pressKey = []

8
src/renderer/utils/static.ts
View File

@@ -24,7 +24,7 @@ export const picBedsCanbeDeleted = [
'smms',
'tcyun',
'upyun',
'webdavplist'
'webdavplist',
]
export const picBedManualUrlList: IStringKeyMap = {
@@ -46,7 +46,7 @@ export const picBedManualUrlList: IStringKeyMap = {
sftpplist: 'https://piclist.cn/configure.html#%E5%86%85%E7%BD%AEsftp',
smms: 'https://piclist.cn/configure.html#sm-ms',
upyun: 'https://piclist.cn/configure.html#%E5%8F%88%E6%8B%8D%E4%BA%91',
webdavplist: 'https://piclist.cn/configure.html#webdav'
webdavplist: 'https://piclist.cn/configure.html#webdav',
},
en: {
advancedpiclist: 'https://piclist.cn/en/configure.html#advanced',
@@ -66,6 +66,6 @@ export const picBedManualUrlList: IStringKeyMap = {
sftpplist: 'https://piclist.cn/en/configure.html#built-in-sftp',
smms: 'https://piclist.cn/en/configure.html#sm-ms',
upyun: 'https://piclist.cn/en/configure.html#upyun',
webdavplist: 'https://piclist.cn/en/configure.html#webdav'
}
webdavplist: 'https://piclist.cn/en/configure.html#webdav',
},
}