602 lines
14 KiB
Vue
602 lines
14 KiB
Vue
<script setup>
|
|
import { ref, computed } from 'vue'
|
|
import { X, Plus, Trash2, RotateCcw } from 'lucide-vue-next'
|
|
|
|
const props = defineProps({
|
|
isOpen: Boolean,
|
|
exceptions: Array,
|
|
defaultRules: Array
|
|
})
|
|
|
|
const emit = defineEmits(['close', 'update:exceptions'])
|
|
|
|
const newRule = ref({
|
|
domainPattern: '',
|
|
keepParams: '',
|
|
keepHash: false,
|
|
keepAllParams: false
|
|
})
|
|
|
|
const localExceptions = computed({
|
|
get: () => props.exceptions,
|
|
set: (val) => emit('update:exceptions', val)
|
|
})
|
|
|
|
const addRule = () => {
|
|
if (!newRule.value.domainPattern) return
|
|
|
|
const params = newRule.value.keepParams
|
|
.split(',')
|
|
.map(p => p.trim())
|
|
.filter(p => p)
|
|
|
|
const existingRuleIndex = localExceptions.value.findIndex(
|
|
r => r.domainPattern === newRule.value.domainPattern
|
|
)
|
|
|
|
if (existingRuleIndex >= 0) {
|
|
// Merge with existing rule
|
|
const existingRule = localExceptions.value[existingRuleIndex]
|
|
|
|
// Merge params (unique)
|
|
const mergedParams = [...new Set([...existingRule.keepParams, ...params])]
|
|
|
|
// Merge keepHash
|
|
const mergedKeepHash = existingRule.keepHash || newRule.value.keepHash
|
|
const mergedKeepAllParams = !!existingRule.keepAllParams || !!newRule.value.keepAllParams
|
|
|
|
const updatedRule = {
|
|
...existingRule,
|
|
keepParams: mergedParams,
|
|
keepHash: mergedKeepHash,
|
|
keepAllParams: mergedKeepAllParams,
|
|
isEnabled: true // Re-enable if disabled
|
|
}
|
|
|
|
const newExceptions = [...localExceptions.value]
|
|
newExceptions[existingRuleIndex] = updatedRule
|
|
localExceptions.value = newExceptions
|
|
|
|
} else {
|
|
// Create new rule
|
|
const rule = {
|
|
id: Date.now().toString(),
|
|
domainPattern: newRule.value.domainPattern,
|
|
keepParams: params,
|
|
keepHash: newRule.value.keepHash,
|
|
keepAllParams: newRule.value.keepAllParams,
|
|
isEnabled: true,
|
|
isDefault: false
|
|
}
|
|
localExceptions.value = [...localExceptions.value, rule]
|
|
}
|
|
|
|
// Reset form
|
|
newRule.value = {
|
|
domainPattern: '',
|
|
keepParams: '',
|
|
keepHash: false,
|
|
keepAllParams: false
|
|
}
|
|
}
|
|
|
|
const editRule = (rule) => {
|
|
newRule.value = {
|
|
domainPattern: rule.domainPattern,
|
|
keepParams: Array.isArray(rule.keepParams) ? rule.keepParams.join(', ') : '',
|
|
keepHash: !!rule.keepHash,
|
|
keepAllParams: !!rule.keepAllParams
|
|
}
|
|
}
|
|
|
|
const removeRule = (id) => {
|
|
localExceptions.value = localExceptions.value.filter(r => r.id !== id)
|
|
}
|
|
|
|
const toggleRule = (id) => {
|
|
localExceptions.value = localExceptions.value.map(r => {
|
|
if (r.id === id) {
|
|
return { ...r, isEnabled: !r.isEnabled }
|
|
}
|
|
return r
|
|
})
|
|
}
|
|
|
|
const removeParam = (ruleId, param) => {
|
|
localExceptions.value = localExceptions.value.map(r => {
|
|
if (r.id === ruleId) {
|
|
return {
|
|
...r,
|
|
keepParams: r.keepParams.filter(p => p !== param)
|
|
}
|
|
}
|
|
return r
|
|
})
|
|
}
|
|
|
|
const toggleKeepHash = (ruleId) => {
|
|
localExceptions.value = localExceptions.value.map(r => {
|
|
if (r.id === ruleId) {
|
|
return { ...r, keepHash: !r.keepHash }
|
|
}
|
|
return r
|
|
})
|
|
}
|
|
|
|
const toggleKeepAllParams = (ruleId) => {
|
|
localExceptions.value = localExceptions.value.map(r => {
|
|
if (r.id === ruleId) {
|
|
return { ...r, keepAllParams: !r.keepAllParams }
|
|
}
|
|
return r
|
|
})
|
|
}
|
|
|
|
const resetToDefault = (ruleId) => {
|
|
const defaultRule = (props.defaultRules || []).find(r => r.id === ruleId)
|
|
if (!defaultRule) return
|
|
|
|
localExceptions.value = localExceptions.value.map(r => {
|
|
if (r.id !== ruleId) return r
|
|
return {
|
|
...r,
|
|
domainPattern: defaultRule.domainPattern,
|
|
keepParams: Array.isArray(defaultRule.keepParams) ? [...defaultRule.keepParams] : [],
|
|
keepHash: !!defaultRule.keepHash,
|
|
keepAllParams: !!defaultRule.keepAllParams,
|
|
isEnabled: true,
|
|
isDefault: true
|
|
}
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<Teleport to="body">
|
|
<div v-if="isOpen" class="modal-overlay" @click.self="$emit('close')">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h3>URL Cleaning Exceptions</h3>
|
|
<button class="close-btn" @click="$emit('close')">
|
|
<X size="24" />
|
|
</button>
|
|
</div>
|
|
|
|
<div class="modal-body">
|
|
<p class="description">
|
|
Define rules to keep specific parameters or anchors for certain domains.
|
|
Standard cleaning removes all parameters and anchors.
|
|
</p>
|
|
|
|
<div class="add-rule-form">
|
|
<h4>Add New Exception</h4>
|
|
<div class="form-row">
|
|
<input
|
|
v-model="newRule.domainPattern"
|
|
placeholder="Domain (e.g. *.youtube.com)"
|
|
class="input-field"
|
|
@keyup.enter="addRule"
|
|
>
|
|
<input
|
|
v-model="newRule.keepParams"
|
|
placeholder="Keep params (comma separated, e.g. v, id)"
|
|
class="input-field"
|
|
@keyup.enter="addRule"
|
|
>
|
|
</div>
|
|
<div class="form-row checkbox-row">
|
|
<div class="checkbox-group">
|
|
<label class="checkbox-label">
|
|
<input type="checkbox" v-model="newRule.keepHash">
|
|
Keep Anchor (#)
|
|
</label>
|
|
<label class="checkbox-label">
|
|
<input type="checkbox" v-model="newRule.keepAllParams">
|
|
Keep all params
|
|
</label>
|
|
</div>
|
|
<button class="btn-neon small" @click="addRule" :disabled="!newRule.domainPattern">
|
|
<Plus size="16" /> Add Rule
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="rules-list">
|
|
<h4>Active Rules</h4>
|
|
<div v-if="localExceptions.length === 0" class="empty-rules">
|
|
No exceptions defined.
|
|
</div>
|
|
|
|
<div v-for="rule in localExceptions" :key="rule.id" class="rule-item" :class="{ disabled: !rule.isEnabled }">
|
|
<div class="rule-info">
|
|
<div class="rule-domain" @click="editRule(rule)" title="Click to edit">{{ rule.domainPattern }}</div>
|
|
<div class="rule-details">
|
|
<div class="params-list">
|
|
<template v-if="rule.keepAllParams">
|
|
<span class="detail-tag">
|
|
Keep all params
|
|
<button class="remove-param-btn" @click.stop="toggleKeepAllParams(rule.id)" title="Disable keep all params">
|
|
<X size="12" />
|
|
</button>
|
|
</span>
|
|
</template>
|
|
<template v-else>
|
|
<span v-for="param in rule.keepParams" :key="param" class="detail-tag">
|
|
{{ param }}
|
|
<button class="remove-param-btn" @click.stop="removeParam(rule.id, param)" title="Remove parameter">
|
|
<X size="12" />
|
|
</button>
|
|
</span>
|
|
</template>
|
|
<span v-if="rule.keepHash" class="detail-tag hash-tag">
|
|
Keep #
|
|
<button class="remove-param-btn" @click.stop="toggleKeepHash(rule.id)" title="Remove hash exception">
|
|
<X size="12" />
|
|
</button>
|
|
</span>
|
|
<span v-if="!rule.keepAllParams && rule.keepParams.length === 0 && !rule.keepHash" class="no-params">No params kept</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="rule-actions">
|
|
<button
|
|
class="icon-btn"
|
|
@click="toggleRule(rule.id)"
|
|
:title="rule.isEnabled ? 'Disable rule' : 'Enable rule'"
|
|
>
|
|
<div class="toggle-switch" :class="{ active: rule.isEnabled }"></div>
|
|
</button>
|
|
|
|
<button
|
|
v-if="!rule.isDefault"
|
|
class="icon-btn delete-btn"
|
|
@click="removeRule(rule.id)"
|
|
title="Remove rule"
|
|
>
|
|
<Trash2 size="18" />
|
|
</button>
|
|
<button v-else class="btn-neon small default-reset" @click="resetToDefault(rule.id)" title="Restore default rule">
|
|
<RotateCcw size="16" /> Default
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Teleport>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.modal-overlay {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba(0, 0, 0, 0.7);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
z-index: 1000;
|
|
backdrop-filter: blur(5px);
|
|
padding: 1rem;
|
|
}
|
|
|
|
:global(:root[data-theme="light"]) .modal-overlay {
|
|
background: rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
.modal-content {
|
|
background: var(--glass-bg);
|
|
backdrop-filter: blur(16px);
|
|
-webkit-backdrop-filter: blur(16px);
|
|
border: 1px solid var(--glass-border);
|
|
border-radius: 16px;
|
|
padding: 0;
|
|
max-width: 800px;
|
|
width: 100%;
|
|
max-height: 85vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
box-shadow: var(--glass-shadow);
|
|
color: var(--text-color);
|
|
}
|
|
|
|
:global(:root[data-theme="light"]) .modal-content {
|
|
background: rgba(255, 255, 255, 0.98);
|
|
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
.modal-header {
|
|
padding: 1.5rem;
|
|
border-bottom: 1px solid var(--glass-border);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.modal-header {
|
|
padding: 0.8rem 1.2rem;
|
|
}
|
|
}
|
|
|
|
.modal-header h3 {
|
|
margin: 0;
|
|
font-size: 1.4rem;
|
|
background: var(--title-gradient);
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
color: transparent;
|
|
}
|
|
|
|
.close-btn {
|
|
background: none;
|
|
border: none;
|
|
color: var(--text-secondary);
|
|
cursor: pointer;
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
.close-btn:hover {
|
|
color: var(--text-color);
|
|
}
|
|
|
|
.modal-body {
|
|
padding: 1.5rem;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.modal-body {
|
|
padding: 1rem 1.2rem;
|
|
}
|
|
}
|
|
|
|
.description {
|
|
color: var(--text-secondary);
|
|
margin-bottom: 1.5rem;
|
|
font-size: 0.95rem;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.add-rule-form {
|
|
background: rgba(255, 255, 255, 0.05);
|
|
padding: 1rem;
|
|
border-radius: 8px;
|
|
margin-bottom: 2rem;
|
|
border: 1px solid var(--glass-border);
|
|
}
|
|
|
|
:global(:root[data-theme="light"]) .add-rule-form {
|
|
background: rgba(0, 0, 0, 0.04);
|
|
border: 1px solid rgba(0, 0, 0, 0.06);
|
|
}
|
|
|
|
.add-rule-form h4, .rules-list h4 {
|
|
margin-top: 0;
|
|
margin-bottom: 1rem;
|
|
font-size: 1rem;
|
|
color: var(--text-strong);
|
|
}
|
|
|
|
.form-row {
|
|
display: flex;
|
|
gap: 0.8rem;
|
|
margin-bottom: 0.8rem;
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.form-row {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.checkbox-row {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.checkbox-group {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 0.8rem;
|
|
}
|
|
|
|
.btn-neon {
|
|
width: 100%;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
.checkbox-row {
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.checkbox-group {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1.2rem;
|
|
}
|
|
|
|
.input-field {
|
|
flex: 1;
|
|
padding: 0.6rem;
|
|
border-radius: 6px;
|
|
border: 1px solid var(--toggle-border);
|
|
background: var(--toggle-bg);
|
|
color: var(--text-color);
|
|
outline: none;
|
|
}
|
|
|
|
.input-field:focus {
|
|
border-color: var(--primary-accent);
|
|
}
|
|
|
|
.checkbox-label {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
color: var(--text-secondary);
|
|
font-size: 0.9rem;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.btn-neon.small {
|
|
padding: 0.4rem 1rem;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.rules-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.8rem;
|
|
}
|
|
|
|
.rule-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 0.8rem;
|
|
border: 1px solid var(--glass-border);
|
|
border-radius: 8px;
|
|
background: rgba(255, 255, 255, 0.03);
|
|
transition: opacity 0.3s;
|
|
}
|
|
|
|
:global(:root[data-theme="light"]) .rule-item {
|
|
background: rgba(0, 0, 0, 0.04);
|
|
border: 1px solid rgba(0, 0, 0, 0.06);
|
|
}
|
|
|
|
.rule-item.disabled {
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.rule-info {
|
|
flex: 1;
|
|
}
|
|
|
|
.rule-domain {
|
|
font-weight: 600;
|
|
color: var(--primary-accent);
|
|
margin-bottom: 0.3rem;
|
|
cursor: pointer;
|
|
transition: opacity 0.2s;
|
|
}
|
|
|
|
.rule-domain:hover {
|
|
opacity: 0.8;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.rule-details {
|
|
width: 100%;
|
|
}
|
|
|
|
.params-list {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.detail-tag {
|
|
font-size: 0.8rem;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
padding: 0.2rem 0.5rem;
|
|
border-radius: 4px;
|
|
color: var(--text-secondary);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.4rem;
|
|
}
|
|
|
|
.remove-param-btn {
|
|
background: none;
|
|
border: none;
|
|
padding: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
color: var(--text-muted);
|
|
cursor: pointer;
|
|
transition: color 0.2s;
|
|
}
|
|
|
|
.remove-param-btn:hover {
|
|
color: #ef4444;
|
|
}
|
|
|
|
.no-params {
|
|
font-size: 0.8rem;
|
|
color: var(--text-muted);
|
|
font-style: italic;
|
|
}
|
|
|
|
.rule-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.8rem;
|
|
}
|
|
|
|
.toggle-switch {
|
|
width: 36px;
|
|
height: 20px;
|
|
background: rgba(255, 255, 255, 0.2);
|
|
border-radius: 10px;
|
|
position: relative;
|
|
transition: background 0.3s;
|
|
}
|
|
|
|
.toggle-switch::after {
|
|
content: '';
|
|
position: absolute;
|
|
left: 2px;
|
|
top: 2px;
|
|
width: 16px;
|
|
height: 16px;
|
|
background: white;
|
|
border-radius: 50%;
|
|
transition: transform 0.3s;
|
|
}
|
|
|
|
.toggle-switch.active {
|
|
background: #4ade80;
|
|
}
|
|
|
|
.toggle-switch.active::after {
|
|
transform: translateX(16px);
|
|
}
|
|
|
|
.default-reset {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.empty-rules {
|
|
text-align: center;
|
|
color: var(--text-muted);
|
|
padding: 1rem;
|
|
}
|
|
|
|
.icon-btn {
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
padding: 0;
|
|
color: var(--text-secondary);
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.delete-btn:hover {
|
|
color: #ef4444;
|
|
}
|
|
|
|
:global(:root[data-theme="light"]) .delete-btn:hover {
|
|
color: #dc2626;
|
|
}
|
|
</style>
|