first commit
This commit is contained in:
nasir@endelospay.com
@@ -0,0 +1,287 @@
|
||||
<template>
|
||||
<div v-if="visible" class="confirmation-dialog" @click.self="$emit('cancel')">
|
||||
<div class="dialog-content">
|
||||
<div class="dialog-header">
|
||||
<span class="dialog-icon">{{ icon }}</span>
|
||||
<h3 class="dialog-title">{{ title }}</h3>
|
||||
</div>
|
||||
|
||||
<div class="dialog-body">
|
||||
<p class="dialog-message">{{ message }}</p>
|
||||
|
||||
<ul v-if="items && items.length > 0" class="dialog-list">
|
||||
<li v-for="item in items" :key="item">{{ item }}</li>
|
||||
</ul>
|
||||
|
||||
<div v-if="warning" class="dialog-warning">
|
||||
<strong>{{ warning }}</strong>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dialog-actions">
|
||||
<button class="dialog-button cancel-button" @click="$emit('cancel')">
|
||||
{{ cancelText }}
|
||||
</button>
|
||||
<button
|
||||
class="dialog-button confirm-button"
|
||||
:disabled="isConfirming"
|
||||
@click="$emit('confirm')"
|
||||
>
|
||||
{{ isConfirming ? confirmingText : confirmText }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { getMessage } from '@/utils/i18n';
|
||||
interface Props {
|
||||
visible: boolean;
|
||||
title: string;
|
||||
message: string;
|
||||
items?: string[];
|
||||
warning?: string;
|
||||
icon?: string;
|
||||
confirmText?: string;
|
||||
cancelText?: string;
|
||||
confirmingText?: string;
|
||||
isConfirming?: boolean;
|
||||
}
|
||||
|
||||
interface Emits {
|
||||
(e: 'confirm'): void;
|
||||
(e: 'cancel'): void;
|
||||
}
|
||||
|
||||
withDefaults(defineProps<Props>(), {
|
||||
icon: '⚠️',
|
||||
confirmText: getMessage('confirmButton'),
|
||||
cancelText: getMessage('cancelButton'),
|
||||
confirmingText: getMessage('processingStatus'),
|
||||
isConfirming: false,
|
||||
});
|
||||
|
||||
defineEmits<Emits>();
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.confirmation-dialog {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
backdrop-filter: blur(8px);
|
||||
animation: dialogFadeIn 0.3s ease-out;
|
||||
}
|
||||
|
||||
@keyframes dialogFadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
backdrop-filter: blur(0px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
backdrop-filter: blur(8px);
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-content {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 24px;
|
||||
max-width: 360px;
|
||||
width: 90%;
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
||||
animation: dialogSlideIn 0.3s ease-out;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
@keyframes dialogSlideIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-30px) scale(0.9);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.dialog-icon {
|
||||
font-size: 24px;
|
||||
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
|
||||
}
|
||||
|
||||
.dialog-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #2d3748;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.dialog-body {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.dialog-message {
|
||||
font-size: 14px;
|
||||
color: #4a5568;
|
||||
margin: 0 0 16px 0;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.dialog-list {
|
||||
margin: 16px 0;
|
||||
padding-left: 24px;
|
||||
background: linear-gradient(135deg, #f7fafc, #edf2f7);
|
||||
border-radius: 6px;
|
||||
padding: 12px 12px 12px 32px;
|
||||
border-left: 3px solid #667eea;
|
||||
}
|
||||
|
||||
.dialog-list li {
|
||||
font-size: 13px;
|
||||
color: #718096;
|
||||
margin-bottom: 6px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.dialog-list li:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.dialog-warning {
|
||||
font-size: 13px;
|
||||
color: #e53e3e;
|
||||
margin: 16px 0 0 0;
|
||||
padding: 12px;
|
||||
background: linear-gradient(135deg, rgba(245, 101, 101, 0.1), rgba(229, 62, 62, 0.05));
|
||||
border-radius: 6px;
|
||||
border-left: 3px solid #e53e3e;
|
||||
border: 1px solid rgba(245, 101, 101, 0.2);
|
||||
}
|
||||
|
||||
.dialog-actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.dialog-button {
|
||||
padding: 10px 20px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
min-width: 80px;
|
||||
}
|
||||
|
||||
.cancel-button {
|
||||
background: linear-gradient(135deg, #e2e8f0, #cbd5e0);
|
||||
color: #4a5568;
|
||||
border: 1px solid #cbd5e0;
|
||||
}
|
||||
|
||||
.cancel-button:hover {
|
||||
background: linear-gradient(135deg, #cbd5e0, #a0aec0);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(160, 174, 192, 0.3);
|
||||
}
|
||||
|
||||
.confirm-button {
|
||||
background: linear-gradient(135deg, #f56565, #e53e3e);
|
||||
color: white;
|
||||
border: 1px solid #e53e3e;
|
||||
}
|
||||
|
||||
.confirm-button:hover:not(:disabled) {
|
||||
background: linear-gradient(135deg, #e53e3e, #c53030);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(245, 101, 101, 0.4);
|
||||
}
|
||||
|
||||
.confirm-button:disabled {
|
||||
opacity: 0.7;
|
||||
cursor: not-allowed;
|
||||
transform: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 420px) {
|
||||
.dialog-content {
|
||||
padding: 20px;
|
||||
max-width: 320px;
|
||||
}
|
||||
|
||||
.dialog-header {
|
||||
gap: 10px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.dialog-icon {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.dialog-title {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.dialog-message {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.dialog-list {
|
||||
padding: 10px 10px 10px 28px;
|
||||
}
|
||||
|
||||
.dialog-list li {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.dialog-warning {
|
||||
font-size: 12px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.dialog-actions {
|
||||
gap: 8px;
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
.dialog-button {
|
||||
width: 100%;
|
||||
padding: 12px 16px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 焦点样式 */
|
||||
.dialog-button:focus {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.3);
|
||||
}
|
||||
|
||||
.cancel-button:focus {
|
||||
box-shadow: 0 0 0 3px rgba(160, 174, 192, 0.3);
|
||||
}
|
||||
|
||||
.confirm-button:focus {
|
||||
box-shadow: 0 0 0 3px rgba(245, 101, 101, 0.3);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,320 @@
|
||||
<template>
|
||||
<div class="model-cache-section">
|
||||
<h2 class="section-title">{{ getMessage('modelCacheManagementLabel') }}</h2>
|
||||
|
||||
<!-- Cache Statistics Grid -->
|
||||
<div class="stats-grid">
|
||||
<div class="stats-card">
|
||||
<div class="stats-header">
|
||||
<p class="stats-label">{{ getMessage('cacheSizeLabel') }}</p>
|
||||
<span class="stats-icon orange">
|
||||
<DatabaseIcon />
|
||||
</span>
|
||||
</div>
|
||||
<p class="stats-value">{{ cacheStats?.totalSizeMB || 0 }} MB</p>
|
||||
</div>
|
||||
|
||||
<div class="stats-card">
|
||||
<div class="stats-header">
|
||||
<p class="stats-label">{{ getMessage('cacheEntriesLabel') }}</p>
|
||||
<span class="stats-icon purple">
|
||||
<VectorIcon />
|
||||
</span>
|
||||
</div>
|
||||
<p class="stats-value">{{ cacheStats?.entryCount || 0 }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Cache Entries Details -->
|
||||
<div v-if="cacheStats && cacheStats.entries.length > 0" class="cache-details">
|
||||
<h3 class="cache-details-title">{{ getMessage('cacheDetailsLabel') }}</h3>
|
||||
<div class="cache-entries">
|
||||
<div v-for="entry in cacheStats.entries" :key="entry.url" class="cache-entry">
|
||||
<div class="entry-info">
|
||||
<div class="entry-url">{{ getModelNameFromUrl(entry.url) }}</div>
|
||||
<div class="entry-details">
|
||||
<span class="entry-size">{{ entry.sizeMB }} MB</span>
|
||||
<span class="entry-age">{{ entry.age }}</span>
|
||||
<span v-if="entry.expired" class="entry-expired">{{ getMessage('expiredLabel') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- No Cache Message -->
|
||||
<div v-else-if="cacheStats && cacheStats.entries.length === 0" class="no-cache">
|
||||
<p>{{ getMessage('noCacheDataMessage') }}</p>
|
||||
</div>
|
||||
|
||||
<!-- Loading State -->
|
||||
<div v-else-if="!cacheStats" class="loading-cache">
|
||||
<p>{{ getMessage('loadingCacheInfoStatus') }}</p>
|
||||
</div>
|
||||
|
||||
<!-- Progress Indicator -->
|
||||
<ProgressIndicator
|
||||
v-if="isManagingCache"
|
||||
:visible="isManagingCache"
|
||||
:text="isManagingCache ? getMessage('processingCacheStatus') : ''"
|
||||
:showSpinner="true"
|
||||
/>
|
||||
|
||||
<!-- Action Buttons -->
|
||||
<div class="cache-actions">
|
||||
<div class="secondary-button" :disabled="isManagingCache" @click="$emit('cleanup-cache')">
|
||||
<span class="stats-icon"><DatabaseIcon /></span>
|
||||
<span>{{
|
||||
isManagingCache ? getMessage('cleaningStatus') : getMessage('cleanExpiredCacheButton')
|
||||
}}</span>
|
||||
</div>
|
||||
|
||||
<div class="danger-button" :disabled="isManagingCache" @click="$emit('clear-all-cache')">
|
||||
<span class="stats-icon"><TrashIcon /></span>
|
||||
<span>{{ isManagingCache ? getMessage('clearingStatus') : getMessage('clearAllCacheButton') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import ProgressIndicator from './ProgressIndicator.vue';
|
||||
import { DatabaseIcon, VectorIcon, TrashIcon } from './icons';
|
||||
import { getMessage } from '@/utils/i18n';
|
||||
|
||||
interface CacheEntry {
|
||||
url: string;
|
||||
size: number;
|
||||
sizeMB: number;
|
||||
timestamp: number;
|
||||
age: string;
|
||||
expired: boolean;
|
||||
}
|
||||
|
||||
interface CacheStats {
|
||||
totalSize: number;
|
||||
totalSizeMB: number;
|
||||
entryCount: number;
|
||||
entries: CacheEntry[];
|
||||
}
|
||||
|
||||
interface Props {
|
||||
cacheStats: CacheStats | null;
|
||||
isManagingCache: boolean;
|
||||
}
|
||||
|
||||
interface Emits {
|
||||
(e: 'cleanup-cache'): void;
|
||||
(e: 'clear-all-cache'): void;
|
||||
}
|
||||
|
||||
defineProps<Props>();
|
||||
defineEmits<Emits>();
|
||||
|
||||
const getModelNameFromUrl = (url: string) => {
|
||||
// Extract model name from HuggingFace URL
|
||||
const match = url.match(/huggingface\.co\/([^/]+\/[^/]+)/);
|
||||
if (match) {
|
||||
return match[1];
|
||||
}
|
||||
return url.split('/').pop() || url;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.model-cache-section {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #374151;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 12px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.stats-card {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.stats-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.stats-label {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.stats-icon {
|
||||
padding: 8px;
|
||||
border-radius: 8px;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
.stats-icon.orange {
|
||||
background: #fed7aa;
|
||||
color: #ea580c;
|
||||
}
|
||||
|
||||
.stats-icon.purple {
|
||||
background: #e9d5ff;
|
||||
color: #9333ea;
|
||||
}
|
||||
|
||||
.stats-value {
|
||||
font-size: 30px;
|
||||
font-weight: 700;
|
||||
color: #0f172a;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.cache-details {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.cache-details-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #374151;
|
||||
margin: 0 0 12px 0;
|
||||
}
|
||||
|
||||
.cache-entries {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.cache-entry {
|
||||
background: white;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.entry-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.entry-url {
|
||||
font-weight: 500;
|
||||
color: #1f2937;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.entry-details {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.entry-size {
|
||||
background: #dbeafe;
|
||||
color: #1e40af;
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.entry-age {
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.entry-expired {
|
||||
background: #fee2e2;
|
||||
color: #dc2626;
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.no-cache,
|
||||
.loading-cache {
|
||||
text-align: center;
|
||||
color: #6b7280;
|
||||
padding: 20px;
|
||||
background: #f8fafc;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #e2e8f0;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.cache-actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.secondary-button {
|
||||
background: #f1f5f9;
|
||||
color: #475569;
|
||||
border: 1px solid #cbd5e1;
|
||||
padding: 8px 16px;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.secondary-button:hover:not(:disabled) {
|
||||
background: #e2e8f0;
|
||||
border-color: #94a3b8;
|
||||
}
|
||||
|
||||
.secondary-button:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.danger-button {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
background: white;
|
||||
border: 1px solid #d1d5db;
|
||||
color: #374151;
|
||||
font-weight: 600;
|
||||
padding: 12px 16px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.danger-button:hover:not(:disabled) {
|
||||
border-color: #ef4444;
|
||||
color: #dc2626;
|
||||
}
|
||||
|
||||
.danger-button:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,95 @@
|
||||
<template>
|
||||
<div v-if="visible" class="progress-section">
|
||||
<div class="progress-indicator">
|
||||
<div class="spinner" v-if="showSpinner"></div>
|
||||
<span class="progress-text">{{ text }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
interface Props {
|
||||
visible?: boolean;
|
||||
text: string;
|
||||
showSpinner?: boolean;
|
||||
}
|
||||
|
||||
withDefaults(defineProps<Props>(), {
|
||||
visible: true,
|
||||
showSpinner: true,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.progress-section {
|
||||
margin-top: 16px;
|
||||
animation: slideIn 0.3s ease-out;
|
||||
}
|
||||
|
||||
.progress-indicator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 16px;
|
||||
background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
|
||||
border-radius: 8px;
|
||||
border-left: 4px solid #667eea;
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(102, 126, 234, 0.2);
|
||||
}
|
||||
|
||||
.spinner {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 3px solid rgba(102, 126, 234, 0.2);
|
||||
border-top: 3px solid #667eea;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.progress-text {
|
||||
font-size: 14px;
|
||||
color: #4a5568;
|
||||
font-weight: 500;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
@keyframes slideIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 420px) {
|
||||
.progress-indicator {
|
||||
padding: 12px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-width: 2px;
|
||||
}
|
||||
|
||||
.progress-text {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,26 @@
|
||||
<template>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
:class="className"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="m3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75Z"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
interface Props {
|
||||
className?: string;
|
||||
}
|
||||
|
||||
withDefaults(defineProps<Props>(), {
|
||||
className: 'icon-default',
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,24 @@
|
||||
<template>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
:class="className"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.052-.143Z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
interface Props {
|
||||
className?: string;
|
||||
}
|
||||
|
||||
withDefaults(defineProps<Props>(), {
|
||||
className: 'icon-small',
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,26 @@
|
||||
<template>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="2"
|
||||
stroke="currentColor"
|
||||
:class="className"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
interface Props {
|
||||
className?: string;
|
||||
}
|
||||
|
||||
withDefaults(defineProps<Props>(), {
|
||||
className: 'icon-default',
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,26 @@
|
||||
<template>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="2"
|
||||
stroke="currentColor"
|
||||
:class="className"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
interface Props {
|
||||
className?: string;
|
||||
}
|
||||
|
||||
withDefaults(defineProps<Props>(), {
|
||||
className: 'icon-default',
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,26 @@
|
||||
<template>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="2"
|
||||
stroke="currentColor"
|
||||
:class="className"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M8.25 3v1.5M4.5 8.25H3m18 0h-1.5M4.5 12H3m18 0h-1.5m-16.5 3.75H3m18 0h-1.5M8.25 19.5V21M12 3v1.5m0 15V21m3.75-18v1.5m0 15V21m-9-1.5h10.5a2.25 2.25 0 0 0 2.25-2.25V6.75a2.25 2.25 0 0 0-2.25-2.25H6.75A2.25 2.25 0 0 0 4.5 6.75v10.5a2.25 2.25 0 0 0 2.25 2.25Z"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
interface Props {
|
||||
className?: string;
|
||||
}
|
||||
|
||||
withDefaults(defineProps<Props>(), {
|
||||
className: 'icon-default',
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,26 @@
|
||||
<template>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
:class="className"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
interface Props {
|
||||
className?: string;
|
||||
}
|
||||
|
||||
withDefaults(defineProps<Props>(), {
|
||||
className: 'icon-default',
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,26 @@
|
||||
<template>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="2"
|
||||
stroke="currentColor"
|
||||
:class="className"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M9 4.5a4.5 4.5 0 0 1 6 0M9 4.5V3a1.5 1.5 0 0 1 1.5-1.5h3A1.5 1.5 0 0 1 15 3v1.5M9 4.5a4.5 4.5 0 0 0-4.5 4.5v7.5A1.5 1.5 0 0 0 6 18h12a1.5 1.5 0 0 0 1.5-1.5V9a4.5 4.5 0 0 0-4.5-4.5M12 12l2.25 2.25M12 12l-2.25-2.25M12 12v6"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
interface Props {
|
||||
className?: string;
|
||||
}
|
||||
|
||||
withDefaults(defineProps<Props>(), {
|
||||
className: 'icon-default',
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,7 @@
|
||||
export { default as DocumentIcon } from './DocumentIcon.vue';
|
||||
export { default as DatabaseIcon } from './DatabaseIcon.vue';
|
||||
export { default as BoltIcon } from './BoltIcon.vue';
|
||||
export { default as TrashIcon } from './TrashIcon.vue';
|
||||
export { default as CheckIcon } from './CheckIcon.vue';
|
||||
export { default as TabIcon } from './TabIcon.vue';
|
||||
export { default as VectorIcon } from './VectorIcon.vue';
|
||||
Reference in New Issue
Block a user