up
This commit is contained in:
@@ -0,0 +1,19 @@
|
||||
<script setup>
|
||||
import { useI18n } from 'vue-i18n'
|
||||
const { t } = useI18n()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<footer class="border-t border-gray-200 bg-white py-6 dark:border-dk-muted dark:bg-dk-base print:hidden">
|
||||
<div class="mx-auto flex max-w-6xl flex-col items-center justify-between gap-3 px-4 sm:flex-row sm:gap-0">
|
||||
<div class="flex items-center gap-3 text-sm text-gray-500">
|
||||
<a href="https://github.com/wuwenfengmi1998/ops2" target="_blank" class="hover:text-gray-700 dark:hover:text-dk-text" rel="noopener">{{ t('footer.github') }}</a>
|
||||
<span class="text-gray-300 dark:text-dk-muted">·</span>
|
||||
<a href="https://github.com/wuwenfengmi1998/ops2/blob/main/LICENSE" target="_blank" class="hover:text-gray-700 dark:hover:text-dk-text" rel="noopener">{{ t('footer.license') }}</a>
|
||||
<span class="text-gray-300 dark:text-dk-muted">·</span>
|
||||
<a href="https://github.com/wuwenfengmi1998" target="_blank" class="hover:text-gray-700 dark:hover:text-dk-text" rel="noopener">{{ t('footer.author_home') }}</a>
|
||||
</div>
|
||||
<div class="text-sm text-gray-400">{{ t('footer.copy') }}</div>
|
||||
</div>
|
||||
</footer>
|
||||
</template>
|
||||
@@ -0,0 +1,231 @@
|
||||
<script setup>
|
||||
import { ref, computed } from "vue";
|
||||
import { useRouter, useRoute, RouterLink } from "vue-router";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useUserStore } from "@/stores/user";
|
||||
import {
|
||||
IconMoon,
|
||||
IconSun,
|
||||
IconLogout,
|
||||
IconUser,
|
||||
IconSettings,
|
||||
IconMenu2,
|
||||
IconX,
|
||||
} from "@tabler/icons-vue";
|
||||
|
||||
const { t, locale } = useI18n();
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
const userStore = useUserStore();
|
||||
|
||||
const isDark = ref(document.documentElement.classList.contains("dark"));
|
||||
const mobileMenuOpen = ref(false);
|
||||
const userDropdownOpen = ref(false);
|
||||
|
||||
function toggleTheme() {
|
||||
isDark.value = !isDark.value;
|
||||
document.documentElement.classList.toggle("dark", isDark.value);
|
||||
localStorage.setItem("tablerTheme", isDark.value ? "dark" : "light");
|
||||
}
|
||||
|
||||
function toggleLocale() {
|
||||
locale.value = locale.value === "zh-CN" ? "en" : "zh-CN";
|
||||
}
|
||||
|
||||
function isActive(path) {
|
||||
return route.path === path;
|
||||
}
|
||||
|
||||
function handleLogout() {
|
||||
userStore.logout();
|
||||
router.push("/login");
|
||||
}
|
||||
|
||||
const activeClass = "bg-blue-50 text-blue-600 dark:bg-dk-card dark:text-blue-400";
|
||||
const normalClass = "rounded-md px-3 py-2 text-sm font-medium text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-900 dark:text-dk-subtle dark:hover:bg-dk-card dark:hover:text-dk-text";
|
||||
|
||||
const navItems = computed(() => [
|
||||
{ label: t("appname.home"), to: "/" },
|
||||
{ label: t("appname.schedule"), to: "/schedule" },
|
||||
{ label: t("appname.purchase"), to: "/purchase" },
|
||||
{ label: t("appname.warehouse"), to: "/warehouse" },
|
||||
]);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<header
|
||||
class="border-b border-gray-200 bg-white dark:border-dk-muted dark:bg-dk-base print:hidden"
|
||||
>
|
||||
<div class="mx-auto flex h-14 max-w-6xl items-center px-4">
|
||||
<!-- Logo -->
|
||||
<RouterLink to="/" class="mr-6 flex items-center">
|
||||
<img src="/logo.svg" class="h-8 w-8 rounded-lg" alt="Operations" />
|
||||
<span class="ml-2 text-lg font-bold text-gray-800 dark:text-dk-text"
|
||||
>Operations</span
|
||||
>
|
||||
</RouterLink>
|
||||
|
||||
<!-- Mobile toggle -->
|
||||
<button
|
||||
class="ml-auto rounded p-1.5 text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:hover:bg-dk-card dark:hover:text-dk-text md:ml-0 md:hidden"
|
||||
@click="mobileMenuOpen = !mobileMenuOpen"
|
||||
>
|
||||
<IconX v-if="mobileMenuOpen" :size="22" />
|
||||
<IconMenu2 v-else :size="22" />
|
||||
</button>
|
||||
|
||||
<!-- Desktop Nav -->
|
||||
<nav class="hidden flex-1 items-center gap-1 md:flex">
|
||||
<RouterLink
|
||||
v-for="item in navItems"
|
||||
:key="item.to"
|
||||
:to="item.to"
|
||||
:class="[normalClass, isActive(item.to) && activeClass]"
|
||||
>
|
||||
{{ item.label }}
|
||||
</RouterLink>
|
||||
</nav>
|
||||
|
||||
<!-- Right actions -->
|
||||
<div class="ml-auto hidden items-center gap-1 md:flex">
|
||||
<!-- Language -->
|
||||
<button
|
||||
class="rounded-md p-2 text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-700 dark:hover:bg-dk-card dark:hover:text-dk-text"
|
||||
@click="toggleLocale"
|
||||
:title="locale === 'zh-CN' ? 'English' : '中文'"
|
||||
>
|
||||
<span class="text-xs font-semibold uppercase">{{
|
||||
locale === "zh-CN" ? "EN" : "中"
|
||||
}}</span>
|
||||
</button>
|
||||
|
||||
<!-- Theme -->
|
||||
<button
|
||||
class="rounded-md p-2 text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-700 dark:hover:bg-dk-card dark:hover:text-dk-text"
|
||||
@click="toggleTheme"
|
||||
>
|
||||
<IconMoon v-if="!isDark" :size="20" />
|
||||
<IconSun v-else :size="20" />
|
||||
</button>
|
||||
|
||||
<!-- User -->
|
||||
<div v-if="userStore.isLoggedIn" class="relative ml-1">
|
||||
<button
|
||||
class="flex items-center gap-1.5 rounded-md px-2 py-1.5 text-sm text-gray-600 transition-colors hover:bg-gray-100 dark:text-dk-subtle dark:hover:bg-dk-card"
|
||||
@click="userDropdownOpen = !userDropdownOpen"
|
||||
>
|
||||
<IconUser :size="20" />
|
||||
<span class="max-w-24 truncate">{{
|
||||
userStore.user?.Name || ""
|
||||
}}</span>
|
||||
</button>
|
||||
<Transition
|
||||
enter-active-class="transition duration-100 ease-out"
|
||||
enter-from-class="transform scale-95 opacity-0"
|
||||
enter-to-class="transform scale-100 opacity-100"
|
||||
leave-active-class="transition duration-75 ease-in"
|
||||
leave-from-class="transform scale-100 opacity-100"
|
||||
leave-to-class="transform scale-95 opacity-0"
|
||||
>
|
||||
<div
|
||||
v-if="userDropdownOpen"
|
||||
class="absolute right-0 z-50 mt-1 w-48 rounded-lg border border-gray-200 bg-white py-1 shadow-lg dark:border-dk-muted dark:bg-dk-card"
|
||||
>
|
||||
<RouterLink
|
||||
to="/settings/account"
|
||||
class="flex items-center gap-2 px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-dk-subtle dark:hover:bg-dk-muted"
|
||||
@click="userDropdownOpen = false"
|
||||
>
|
||||
<IconSettings :size="16" />
|
||||
{{ t("message.user_settings") }}
|
||||
</RouterLink>
|
||||
<hr class="my-1 border-gray-200 dark:border-dk-muted" />
|
||||
<button
|
||||
class="flex w-full items-center gap-2 px-4 py-2 text-sm text-red-600 hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-900/20"
|
||||
@click="
|
||||
handleLogout();
|
||||
userDropdownOpen = false;
|
||||
"
|
||||
>
|
||||
<IconLogout :size="16" />
|
||||
{{ t("message.logout") }}
|
||||
</button>
|
||||
</div>
|
||||
</Transition>
|
||||
</div>
|
||||
<RouterLink
|
||||
v-else
|
||||
to="/login"
|
||||
class="ml-2 rounded-md bg-blue-600 px-3 py-1.5 text-sm font-medium text-white transition-colors hover:bg-blue-700"
|
||||
>
|
||||
{{ t("message.login_or_register") }}
|
||||
</RouterLink>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mobile menu -->
|
||||
<Transition
|
||||
enter-active-class="transition duration-200 ease-out"
|
||||
enter-from-class="-translate-y-2 opacity-0"
|
||||
enter-to-class="translate-y-0 opacity-100"
|
||||
leave-active-class="transition duration-150 ease-in"
|
||||
leave-from-class="translate-y-0 opacity-100"
|
||||
leave-to-class="-translate-y-2 opacity-0"
|
||||
>
|
||||
<div
|
||||
v-if="mobileMenuOpen"
|
||||
class="border-t border-gray-200 bg-white px-4 pb-4 pt-2 dark:border-dk-muted dark:bg-dk-base md:hidden"
|
||||
>
|
||||
<nav class="flex flex-col gap-1">
|
||||
<RouterLink
|
||||
v-for="item in navItems"
|
||||
:key="item.to"
|
||||
:to="item.to"
|
||||
:class="['rounded-md px-3 py-2 text-sm font-medium text-gray-600 hover:bg-gray-100 dark:text-dk-subtle dark:hover:bg-dk-card', isActive(item.to) && 'bg-blue-50 text-blue-600 dark:bg-dk-card dark:text-blue-400']"
|
||||
@click="mobileMenuOpen = false"
|
||||
>
|
||||
{{ item.label }}
|
||||
</RouterLink>
|
||||
</nav>
|
||||
<hr class="my-3 border-gray-200 dark:border-dk-muted" />
|
||||
<div class="flex items-center gap-2">
|
||||
<button
|
||||
class="rounded-md p-2 text-gray-500 hover:bg-gray-100 dark:hover:bg-dk-card"
|
||||
@click="toggleLocale"
|
||||
>
|
||||
<span class="text-xs font-semibold uppercase">{{
|
||||
locale === "zh-CN" ? "EN" : "中"
|
||||
}}</span>
|
||||
</button>
|
||||
<button
|
||||
class="rounded-md p-2 text-gray-500 hover:bg-gray-100 dark:hover:bg-dk-card"
|
||||
@click="toggleTheme"
|
||||
>
|
||||
<IconMoon v-if="!isDark" :size="20" />
|
||||
<IconSun v-else :size="20" />
|
||||
</button>
|
||||
<div class="ml-auto">
|
||||
<RouterLink
|
||||
v-if="!userStore.isLoggedIn"
|
||||
to="/login"
|
||||
class="rounded-md bg-blue-600 px-3 py-1.5 text-sm font-medium text-white hover:bg-blue-700"
|
||||
@click="mobileMenuOpen = false"
|
||||
>
|
||||
{{ t("message.login_or_register") }}
|
||||
</RouterLink>
|
||||
<button
|
||||
v-else
|
||||
class="rounded-md px-3 py-1.5 text-sm text-red-600 hover:bg-red-50 dark:text-red-400"
|
||||
@click="
|
||||
handleLogout();
|
||||
mobileMenuOpen = false;
|
||||
"
|
||||
>
|
||||
{{ t("message.logout") }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
</header>
|
||||
</template>
|
||||
@@ -0,0 +1,40 @@
|
||||
<script setup>
|
||||
import { useToastStore } from '@/stores/toast'
|
||||
import { IconAlertCircle, IconAlertTriangle, IconCheck, IconInfoCircle, IconX } from '@tabler/icons-vue'
|
||||
|
||||
const toastStore = useToastStore()
|
||||
|
||||
const icons = {
|
||||
success: IconCheck,
|
||||
warning: IconAlertTriangle,
|
||||
error: IconAlertCircle,
|
||||
info: IconInfoCircle,
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Transition
|
||||
enter-active-class="transition duration-300 ease-out"
|
||||
enter-from-class="translate-y-2 opacity-0"
|
||||
enter-to-class="translate-y-0 opacity-100"
|
||||
leave-active-class="transition duration-200 ease-in"
|
||||
leave-from-class="translate-y-0 opacity-100"
|
||||
leave-to-class="translate-y-2 opacity-0"
|
||||
>
|
||||
<div
|
||||
v-if="toastStore.visible"
|
||||
class="fixed left-1/2 top-5 z-[9999] flex max-w-sm -translate-x-1/2 transform items-start gap-3 rounded-lg border-0 bg-white px-4 py-3 shadow-lg dark:bg-dk-card dark:text-dk-text"
|
||||
:class="{
|
||||
'text-green-700': toastStore.type === 'success',
|
||||
'text-blue-700': toastStore.type === 'warning',
|
||||
'text-red-700': toastStore.type === 'error',
|
||||
'text-gray-700': toastStore.type === 'info',
|
||||
}"
|
||||
role="alert"
|
||||
>
|
||||
<component :is="icons[toastStore.type] || IconInfoCircle" :size="20" class="mt-0.5 shrink-0" />
|
||||
<span class="flex-1 text-sm">{{ toastStore.message }}</span>
|
||||
<button class="ml-1 text-white/70 hover:text-white" @click="toastStore.hide()">×</button>
|
||||
</div>
|
||||
</Transition>
|
||||
</template>
|
||||
@@ -1,70 +0,0 @@
|
||||
<script setup>
|
||||
import { useI18n } from 'vue-i18n'
|
||||
const { t } = useI18n()
|
||||
</script>
|
||||
<template>
|
||||
<footer class="footer footer-transparent d-print-none">
|
||||
<div class="container-xl">
|
||||
<div class="row text-center align-items-center flex-row-reverse">
|
||||
<div class="col-lg-auto ms-lg-auto">
|
||||
<ul class="list-inline list-inline-dots mb-0">
|
||||
<li class="list-inline-item">
|
||||
<a
|
||||
href="https://github.com/wuwenfengmi1998/ops2/blob/main/readme.md"
|
||||
target="_blank"
|
||||
class="link-secondary"
|
||||
rel="noopener"
|
||||
>{{t('footer.doc')}}</a
|
||||
>
|
||||
</li>
|
||||
<li class="list-inline-item">
|
||||
<a
|
||||
href="https://github.com/wuwenfengmi1998/ops2/blob/main/LICENSE"
|
||||
target="_blank"
|
||||
class="link-secondary"
|
||||
>{{t('footer.license')}}</a
|
||||
>
|
||||
</li>
|
||||
<li class="list-inline-item">
|
||||
<a
|
||||
href="https://github.com/wuwenfengmi1998/ops2"
|
||||
target="_blank"
|
||||
class="link-secondary"
|
||||
rel="noopener"
|
||||
>{{t('footer.source_code')}}</a
|
||||
>
|
||||
</li>
|
||||
<li class="list-inline-item">
|
||||
<a
|
||||
href="https://github.com/wuwenfengmi1998"
|
||||
target="_blank"
|
||||
class="link-secondary"
|
||||
rel="noopener"
|
||||
>
|
||||
|
||||
kevin
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-12 col-lg-auto mt-3 mt-lg-0">
|
||||
<ul class="list-inline list-inline-dots mb-0">
|
||||
<li class="list-inline-item">
|
||||
{{ t('footer.copy')}}
|
||||
</li>
|
||||
<li class="list-inline-item">
|
||||
<a
|
||||
href="https://git.lmve.net/kevin/ops2/-/commits/main"
|
||||
target="_blank"
|
||||
class="link-secondary"
|
||||
rel="noopener"
|
||||
>
|
||||
v0.0.1
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</template>
|
||||
@@ -1,337 +0,0 @@
|
||||
<script setup>
|
||||
import { useUserStore } from "@/stores/user";
|
||||
|
||||
import { RouterLink, useRouter } from "vue-router";
|
||||
|
||||
import { useI18n } from "vue-i18n";
|
||||
|
||||
import { myfuncs } from "@/myfunc.js";
|
||||
import { onMounted, ref } from "vue";
|
||||
|
||||
// import { Tooltip } from "@tabler/core";
|
||||
// import { Dropdown } from 'bootstrap'
|
||||
|
||||
// 使用 vue-i18n 的 Composition API
|
||||
const { t, locale } = useI18n();
|
||||
const userStore = useUserStore();
|
||||
const theTeme = ref("light");
|
||||
const lang_sele = ref(null);
|
||||
const router = useRouter();
|
||||
|
||||
function set_them(temp) {
|
||||
theTeme.value = temp;
|
||||
myfuncs.setTheme(temp, true);
|
||||
}
|
||||
|
||||
function changeLanguage(lang) {
|
||||
// 切换语言
|
||||
const selectElement = lang.target;
|
||||
const selectedLang = selectElement.value;
|
||||
locale.value = selectedLang;
|
||||
myfuncs.save("userLanguage", selectedLang);
|
||||
//console.log("selectedLang:",selectedLang);
|
||||
}
|
||||
|
||||
function logOut() {
|
||||
//console.log("logout");
|
||||
userStore.logout();
|
||||
router.push("/login");
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
const savedTheme = myfuncs.getThemefromStorge();
|
||||
theTeme.value = savedTheme;
|
||||
myfuncs.setTheme(savedTheme, false);
|
||||
const userLang = myfuncs.load("userLanguage");
|
||||
if (userLang) {
|
||||
locale.value = userLang;
|
||||
if (lang_sele.value) {
|
||||
lang_sele.value.value = userLang;
|
||||
}
|
||||
}
|
||||
|
||||
//userlogin
|
||||
userStore.loginFromStoreCookie();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<header class="navbar navbar-expand-md d-print-none">
|
||||
<div class="container-xl">
|
||||
<!-- BEGIN NAVBAR TOGGLER -->
|
||||
<button
|
||||
class="navbar-toggler"
|
||||
type="button"
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target="#navbar-menu"
|
||||
aria-controls="navbar-menu"
|
||||
aria-expanded="false"
|
||||
aria-label="Toggle navigation"
|
||||
>
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<!-- END NAVBAR TOGGLER -->
|
||||
<!-- BEGIN NAVBAR LOGO -->
|
||||
<div
|
||||
class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3"
|
||||
>
|
||||
<router-link to="/" aria-label="Tabler">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="110"
|
||||
height="32"
|
||||
viewBox="0 0 232 68"
|
||||
class="navbar-brand-image"
|
||||
>
|
||||
<path
|
||||
d="M64.6 16.2C63 9.9 58.1 5 51.8 3.4 40 1.5 28 1.5 16.2 3.4 9.9 5 5 9.9 3.4 16.2 1.5 28 1.5 40 3.4 51.8 5 58.1 9.9 63 16.2 64.6c11.8 1.9 23.8 1.9 35.6 0C58.1 63 63 58.1 64.6 51.8c1.9-11.8 1.9-23.8 0-35.6zM33.3 36.3c-2.8 4.4-6.6 8.2-11.1 11-1.5.9-3.3.9-4.8.1s-2.4-2.3-2.5-4c0-1.7.9-3.3 2.4-4.1 2.3-1.4 4.4-3.2 6.1-5.3-1.8-2.1-3.8-3.8-6.1-5.3-2.3-1.3-3-4.2-1.7-6.4s4.3-2.9 6.5-1.6c4.5 2.8 8.2 6.5 11.1 10.9 1 1.4 1 3.3.1 4.7zM49.2 46H37.8c-2.1 0-3.8-1-3.8-3s1.7-3 3.8-3h11.4c2.1 0 3.8 1 3.8 3s-1.7 3-3.8 3z"
|
||||
fill="#066fd1"
|
||||
style="fill: var(--tblr-primary, #066fd1)"
|
||||
/>
|
||||
<path
|
||||
d="M105.8 46.1c.4 0 .9.2 1.2.6s.6 1 .6 1.7c0 .9-.5 1.6-1.4 2.2s-2 .9-3.2.9c-2 0-3.7-.4-5-1.3s-2-2.6-2-5.4V31.6h-2.2c-.8 0-1.4-.3-1.9-.8s-.9-1.1-.9-1.9c0-.7.3-1.4.8-1.8s1.2-.7 1.9-.7h2.2v-3.1c0-.8.3-1.5.8-2.1s1.3-.8 2.1-.8 1.5.3 2 .8.8 1.3.8 2.1v3.1h3.4c.8 0 1.4.3 1.9.8s.8 1.2.8 1.9-.3 1.4-.8 1.8-1.2.7-1.9.7h-3.4v13c0 .7.2 1.2.5 1.5s.8.5 1.4.5c.3 0 .6-.1 1.1-.2.5-.2.8-.3 1.2-.3zm28-20.7c.8 0 1.5.3 2.1.8.5.5.8 1.2.8 2.1v20.3c0 .8-.3 1.5-.8 2.1-.5.6-1.2.8-2.1.8s-1.5-.3-2-.8-.8-1.2-.8-2.1c-.8.9-1.9 1.7-3.2 2.4-1.3.7-2.8 1-4.3 1-2.2 0-4.2-.6-6-1.7-1.8-1.1-3.2-2.7-4.2-4.7s-1.6-4.3-1.6-6.9c0-2.6.5-4.9 1.5-6.9s2.4-3.6 4.2-4.8c1.8-1.1 3.7-1.7 5.9-1.7 1.5 0 3 .3 4.3.8 1.3.6 2.5 1.3 3.4 2.1 0-.8.3-1.5.8-2.1.5-.5 1.2-.7 2-.7zm-9.7 21.3c2.1 0 3.8-.8 5.1-2.3s2-3.4 2-5.7-.7-4.2-2-5.8c-1.3-1.5-3-2.3-5.1-2.3-2 0-3.7.8-5 2.3-1.3 1.5-2 3.5-2 5.8s.6 4.2 1.9 5.7 3 2.3 5.1 2.3zm32.1-21.3c2.2 0 4.2.6 6 1.7 1.8 1.1 3.2 2.7 4.2 4.7s1.6 4.3 1.6 6.9-.5 4.9-1.5 6.9-2.4 3.6-4.2 4.8c-1.8 1.1-3.7 1.7-5.9 1.7-1.5 0-3-.3-4.3-.9s-2.5-1.4-3.4-2.3v.3c0 .8-.3 1.5-.8 2.1-.5.6-1.2.8-2.1.8s-1.5-.3-2.1-.8c-.5-.5-.8-1.2-.8-2.1V18.9c0-.8.3-1.5.8-2.1.5-.6 1.2-.8 2.1-.8s1.5.3 2.1.8c.5.6.8 1.3.8 2.1v10c.8-1 1.8-1.8 3.2-2.5 1.3-.7 2.8-1 4.3-1zm-.7 21.3c2 0 3.7-.8 5-2.3s2-3.5 2-5.8-.6-4.2-1.9-5.7-3-2.3-5.1-2.3-3.8.8-5.1 2.3-2 3.4-2 5.7.7 4.2 2 5.8c1.3 1.6 3 2.3 5.1 2.3zm23.6 1.9c0 .8-.3 1.5-.8 2.1s-1.3.8-2.1.8-1.5-.3-2-.8-.8-1.3-.8-2.1V18.9c0-.8.3-1.5.8-2.1s1.3-.8 2.1-.8 1.5.3 2 .8.8 1.3.8 2.1v29.7zm29.3-10.5c0 .8-.3 1.4-.9 1.9-.6.5-1.2.7-2 .7h-15.8c.4 1.9 1.3 3.4 2.6 4.4 1.4 1.1 2.9 1.6 4.7 1.6 1.3 0 2.3-.1 3.1-.4.7-.2 1.3-.5 1.8-.8.4-.3.7-.5.9-.6.6-.3 1.1-.4 1.6-.4.7 0 1.2.2 1.7.7s.7 1 .7 1.7c0 .9-.4 1.6-1.3 2.4-.9.7-2.1 1.4-3.6 1.9s-3 .8-4.6.8c-2.7 0-5-.6-7-1.7s-3.5-2.7-4.6-4.6-1.6-4.2-1.6-6.6c0-2.8.6-5.2 1.7-7.2s2.7-3.7 4.6-4.8 3.9-1.7 6-1.7 4.1.6 6 1.7 3.4 2.7 4.5 4.7c.9 1.9 1.5 4.1 1.5 6.3zm-12.2-7.5c-3.7 0-5.9 1.7-6.6 5.2h12.6v-.3c-.1-1.3-.8-2.5-2-3.5s-2.5-1.4-4-1.4zm30.3-5.2c1 0 1.8.3 2.4.8.7.5 1 1.2 1 1.9 0 1-.3 1.7-.8 2.2-.5.5-1.1.8-1.8.7-.5 0-1-.1-1.6-.3-.2-.1-.4-.1-.6-.2-.4-.1-.7-.1-1.1-.1-.8 0-1.6.3-2.4.8s-1.4 1.3-1.9 2.3-.7 2.3-.7 3.7v11.4c0 .8-.3 1.5-.8 2.1-.5.6-1.2.8-2.1.8s-1.5-.3-2.1-.8c-.5-.6-.8-1.3-.8-2.1V28.8c0-.8.3-1.5.8-2.1.5-.6 1.2-.8 2.1-.8s1.5.3 2.1.8c.5.6.8 1.3.8 2.1v.6c.7-1.3 1.8-2.3 3.2-3 1.3-.7 2.8-1 4.3-1z"
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
fill="#4a4a4a"
|
||||
/>
|
||||
</svg>
|
||||
</router-link>
|
||||
</div>
|
||||
<!-- END NAVBAR LOGO -->
|
||||
<div class="navbar-nav flex-row order-md-last">
|
||||
<div class="nav-item">
|
||||
<a
|
||||
@click="set_them('dark')"
|
||||
class="nav-link px-0"
|
||||
:class="{ 'd-none': theTeme === 'dark' }"
|
||||
:title="t('message.dark_mode')"
|
||||
>
|
||||
<!-- Download SVG icon from http://tabler.io/icons/icon/moon -->
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
class="icon icon-1"
|
||||
>
|
||||
<path
|
||||
d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
<a
|
||||
@click="set_them('light')"
|
||||
class="nav-link px-0"
|
||||
:class="{ 'd-none': theTeme === 'light' }"
|
||||
:title="t('message.light_mode')"
|
||||
>
|
||||
<!-- Download SVG icon from http://tabler.io/icons/icon/sun -->
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
class="icon icon-1"
|
||||
>
|
||||
<path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" />
|
||||
<path
|
||||
d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
<!-- 这里判断是否已经登陆 是则显示用户信息 否则显示登陆按钮 -->
|
||||
<div v-if="!userStore.isLoggedIn" class="nav-item">
|
||||
<router-link to="login" class="btn btn-outline-primary">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="icon"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="2"
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||
<path d="M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0"></path>
|
||||
<path d="M6 21v-2a4 4 0 0 1 4 -4h4"></path>
|
||||
<path d="M19 22v-6"></path>
|
||||
<path d="M22 19l-3 -3l-3 3"></path>
|
||||
</svg>
|
||||
{{ t("message.login_or_register") }}
|
||||
</router-link>
|
||||
</div>
|
||||
|
||||
<div v-else class="nav-item">
|
||||
<div class="dropdown">
|
||||
<div
|
||||
class="nav-link d-flex lh-1 p-0 px-2"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-label="Open user menu"
|
||||
>
|
||||
<img
|
||||
:src="userStore.getUserAvatarPath()"
|
||||
alt=""
|
||||
class="avatar avatar-sm"
|
||||
/>
|
||||
|
||||
<div class="d-none d-xl-block ps-2">
|
||||
<div>
|
||||
{{
|
||||
userStore.userInfo
|
||||
? userStore.userInfo.Username
|
||||
: userStore.user?.Name
|
||||
}}
|
||||
</div>
|
||||
<div class="mt-1 small text-secondary">
|
||||
{{
|
||||
userStore.userInfo
|
||||
? userStore.userInfo.FirstName
|
||||
: userStore.user?.Email
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
|
||||
<!-- <router-link to="" class="dropdown-item">{{
|
||||
t("message.user_home")
|
||||
}}</router-link> -->
|
||||
<router-link to="/settings/account" class="dropdown-item">{{
|
||||
t("message.user_settings")
|
||||
}}</router-link>
|
||||
<!-- <router-link to="" class="dropdown-item">{{
|
||||
t("message.preferences")
|
||||
}}</router-link> -->
|
||||
<div class="dropdown-divider"></div>
|
||||
<!-- 如何用户是系统管理员这里显示跳转管理的url -->
|
||||
<!-- <router-link to="/admin" class="dropdown-item">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
class="icon icon-tabler icons-tabler-outline icon-tabler-settings"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<path
|
||||
d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z"
|
||||
/>
|
||||
<path d="M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0" />
|
||||
</svg>
|
||||
{{ t("message.administrator") }}</router-link
|
||||
> -->
|
||||
<div @click="logOut" class="dropdown-item">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
class="icon icon-tabler icons-tabler-outline icon-tabler-logout-2"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<path
|
||||
d="M10 8v-2a2 2 0 0 1 2 -2h7a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-7a2 2 0 0 1 -2 -2v-2"
|
||||
/>
|
||||
<path d="M15 12h-12l3 -3" />
|
||||
<path d="M6 15l-3 -3" />
|
||||
</svg>
|
||||
{{ t("message.logout") }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<header class="navbar-expand-md">
|
||||
<div class="collapse navbar-collapse" id="navbar-menu">
|
||||
<div class="navbar">
|
||||
<div class="container-xl">
|
||||
<div class="row flex-column flex-md-row flex-fill align-items-center">
|
||||
<div class="col d-flex">
|
||||
<!-- BEGIN NAVBAR MENU -->
|
||||
<div class="navbar-nav">
|
||||
<router-link
|
||||
to="/"
|
||||
class="nav-item nav-link"
|
||||
active-class="active"
|
||||
>
|
||||
<span class="nav-link-title">
|
||||
{{ t("appname.home") }}
|
||||
</span>
|
||||
</router-link>
|
||||
<router-link
|
||||
to="/schedule"
|
||||
class="nav-item nav-link"
|
||||
active-class="active"
|
||||
>
|
||||
<span class="nav-link-title">
|
||||
{{ t("appname.schedule") }}
|
||||
</span>
|
||||
</router-link>
|
||||
|
||||
<router-link
|
||||
to="/warehouse"
|
||||
class="nav-item nav-link"
|
||||
active-class="active"
|
||||
>
|
||||
<span class="nav-link-title">
|
||||
{{ t("appname.warehouse") }}
|
||||
</span>
|
||||
</router-link>
|
||||
|
||||
<router-link
|
||||
to="/purchase"
|
||||
class="nav-item nav-link"
|
||||
active-class="active"
|
||||
>
|
||||
<span class="nav-link-title">
|
||||
{{ t("appname.purchase") }}
|
||||
</span>
|
||||
</router-link>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="ms-auto">
|
||||
<select
|
||||
class="form-select"
|
||||
@change="changeLanguage"
|
||||
ref="lang_sele"
|
||||
>
|
||||
<option value="en">English</option>
|
||||
<option value="zh-CN">中文</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
@@ -1,11 +0,0 @@
|
||||
<script setup>
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="greetings">
|
||||
111
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -1,169 +0,0 @@
|
||||
<script setup>
|
||||
import { onMounted, ref } from "vue";
|
||||
import { Offcanvas } from "@tabler/core";
|
||||
|
||||
const offcanvasTop = ref(null);
|
||||
let ov;
|
||||
const alertType = ref(); // 可选值：'success', 'warning', 'danger', 'info'
|
||||
const alertText = ref();
|
||||
let autoCloseTimeout;
|
||||
onMounted(() => {
|
||||
// 确保在组件挂载后初始化
|
||||
if (offcanvasTop.value) {
|
||||
ov = new Offcanvas(offcanvasTop.value, {
|
||||
backdrop: false,
|
||||
});
|
||||
//ov.show();
|
||||
//console.log('Offcanvas initialized:', ov)
|
||||
}
|
||||
});
|
||||
|
||||
function showAlert(type, text, timeout = 5000, callback) {
|
||||
alertText.value = text;
|
||||
|
||||
alertType.value = type;
|
||||
//console.log(ov);
|
||||
if (ov) {
|
||||
ov.hide();
|
||||
ov.show();
|
||||
if (autoCloseTimeout) {
|
||||
clearTimeout(autoCloseTimeout);
|
||||
}
|
||||
autoCloseTimeout = setTimeout(() => {
|
||||
//console.log("timeout");
|
||||
ov.hide();
|
||||
if (typeof callback === "function") {
|
||||
callback();
|
||||
}
|
||||
}, timeout);
|
||||
}
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
showAlert,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.my_offcanvas_top {
|
||||
position: fixed;
|
||||
|
||||
height: 45px;
|
||||
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
|
||||
margin-left: 20%;
|
||||
margin-right: 20%;
|
||||
margin-top: 20px;
|
||||
|
||||
max-height: 100%;
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
</style>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="offcanvas alert alert-important alert-dismissible my_offcanvas_top"
|
||||
:class="{
|
||||
'alert-success': alertType === 'success',
|
||||
'alert-warning': alertType === 'warning',
|
||||
'alert-danger': alertType === 'danger',
|
||||
'alert-info': alertType === 'info',
|
||||
}"
|
||||
role="alert"
|
||||
tabindex="-1"
|
||||
ref="offcanvasTop"
|
||||
>
|
||||
<div class="d-flex">
|
||||
<div>
|
||||
<!-- Download SVG icon from http://tabler-icons.io/i/check -->
|
||||
<svg
|
||||
v-if="alertType === 'success'"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="icon alert-icon"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="2"
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||
<path d="M5 12l5 5l10 -10"></path>
|
||||
</svg>
|
||||
<svg
|
||||
v-if="alertType === 'warning'"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="icon alert-icon"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="2"
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||
<path
|
||||
d="M10.24 3.957l-8.422 14.06a1.989 1.989 0 0 0 1.7 2.983h16.845a1.989 1.989 0 0 0 1.7 -2.983l-8.423 -14.06a1.989 1.989 0 0 0 -3.4 0z"
|
||||
></path>
|
||||
<path d="M12 9v4"></path>
|
||||
<path d="M12 17h.01"></path>
|
||||
</svg>
|
||||
<svg
|
||||
v-if="alertType === 'danger'"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="icon alert-icon"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="2"
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||
<path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0"></path>
|
||||
<path d="M12 8v4"></path>
|
||||
<path d="M12 16h.01"></path>
|
||||
</svg>
|
||||
<svg
|
||||
v-if="alertType === 'info'"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
class="icon icon-tabler icons-tabler-outline icon-tabler-brand-hipchat"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<path
|
||||
d="M17.802 17.292s.077 -.055 .2 -.149c1.843 -1.425 3 -3.49 3 -5.789c0 -4.286 -4.03 -7.764 -9 -7.764c-4.97 0 -9 3.478 -9 7.764c0 4.288 4.03 7.646 9 7.646c.424 0 1.12 -.028 2.088 -.084c1.262 .82 3.104 1.493 4.716 1.493c.499 0 .734 -.41 .414 -.828c-.486 -.596 -1.156 -1.551 -1.416 -2.29z"
|
||||
/>
|
||||
<path d="M7.5 13.5c2.5 2.5 6.5 2.5 9 0" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
{{ alertText }}
|
||||
</div>
|
||||
</div>
|
||||
<a class="btn-close" data-bs-dismiss="offcanvas" aria-label="close"></a>
|
||||
</div>
|
||||
|
||||
<!-- <div>
|
||||
<button @click="showAlert('success','success')">success</button>
|
||||
<button @click="showAlert('warning','warning')">warning</button>
|
||||
<button @click="showAlert('danger','danger')">danger</button>
|
||||
<button @click="showAlert('info','info')">info</button>
|
||||
</div> -->
|
||||
</template>
|
||||
@@ -0,0 +1,28 @@
|
||||
<script setup>
|
||||
import { RouterLink } from 'vue-router'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { IconUser, IconMail, IconLock } from '@tabler/icons-vue'
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const links = [
|
||||
{ to: '/settings/account', label: 'account_information', icon: IconUser },
|
||||
{ to: '/settings/contact', label: 'contact_information', icon: IconMail },
|
||||
{ to: '/settings/security', label: 'security_settings', icon: IconLock },
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<nav class="flex flex-col gap-1 border-b-4 border-b-blue-600 w-56 shrink-0 py-6">
|
||||
<RouterLink
|
||||
v-for="link in links"
|
||||
:key="link.to"
|
||||
:to="link.to"
|
||||
class="flex items-center gap-2.5 rounded-lg px-3 py-2 text-sm font-medium text-gray-600 transition-colors hover:bg-gray-100 dark:text-dk-subtle dark:hover:bg-dk-card"
|
||||
active-class="!bg-blue-50 !text-blue-600 dark:!bg-dk-card dark:!text-blue-400"
|
||||
>
|
||||
<component :is="link.icon" :size="18" />
|
||||
{{ t(`settings.${link.label}`) }}
|
||||
</RouterLink>
|
||||
</nav>
|
||||
</template>
|
||||
@@ -1,95 +0,0 @@
|
||||
<script setup>
|
||||
import WelcomeItem from './WelcomeItem.vue'
|
||||
import DocumentationIcon from './icons/IconDocumentation.vue'
|
||||
import ToolingIcon from './icons/IconTooling.vue'
|
||||
import EcosystemIcon from './icons/IconEcosystem.vue'
|
||||
import CommunityIcon from './icons/IconCommunity.vue'
|
||||
import SupportIcon from './icons/IconSupport.vue'
|
||||
|
||||
const openReadmeInEditor = () => fetch('/__open-in-editor?file=README.md')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<WelcomeItem>
|
||||
<template #icon>
|
||||
<DocumentationIcon />
|
||||
</template>
|
||||
<template #heading>Documentation</template>
|
||||
|
||||
Vue’s
|
||||
<a href="https://vuejs.org/" target="_blank" rel="noopener">official documentation</a>
|
||||
provides you with all information you need to get started.
|
||||
</WelcomeItem>
|
||||
|
||||
<WelcomeItem>
|
||||
<template #icon>
|
||||
<ToolingIcon />
|
||||
</template>
|
||||
<template #heading>Tooling</template>
|
||||
|
||||
This project is served and bundled with
|
||||
<a href="https://vite.dev/guide/features.html" target="_blank" rel="noopener">Vite</a>. The
|
||||
recommended IDE setup is
|
||||
<a href="https://code.visualstudio.com/" target="_blank" rel="noopener">VSCode</a>
|
||||
+
|
||||
<a href="https://github.com/vuejs/language-tools" target="_blank" rel="noopener"
|
||||
>Vue - Official</a
|
||||
>. If you need to test your components and web pages, check out
|
||||
<a href="https://vitest.dev/" target="_blank" rel="noopener">Vitest</a>
|
||||
and
|
||||
<a href="https://www.cypress.io/" target="_blank" rel="noopener">Cypress</a>
|
||||
/
|
||||
<a href="https://playwright.dev/" target="_blank" rel="noopener">Playwright</a>.
|
||||
|
||||
<br />
|
||||
|
||||
More instructions are available in
|
||||
<a href="javascript:void(0)" @click="openReadmeInEditor"><code>README.md</code></a
|
||||
>.
|
||||
</WelcomeItem>
|
||||
|
||||
<WelcomeItem>
|
||||
<template #icon>
|
||||
<EcosystemIcon />
|
||||
</template>
|
||||
<template #heading>Ecosystem</template>
|
||||
|
||||
Get official tools and libraries for your project:
|
||||
<a href="https://pinia.vuejs.org/" target="_blank" rel="noopener">Pinia</a>,
|
||||
<a href="https://router.vuejs.org/" target="_blank" rel="noopener">Vue Router</a>,
|
||||
<a href="https://test-utils.vuejs.org/" target="_blank" rel="noopener">Vue Test Utils</a>, and
|
||||
<a href="https://github.com/vuejs/devtools" target="_blank" rel="noopener">Vue Dev Tools</a>. If
|
||||
you need more resources, we suggest paying
|
||||
<a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">Awesome Vue</a>
|
||||
a visit.
|
||||
</WelcomeItem>
|
||||
|
||||
<WelcomeItem>
|
||||
<template #icon>
|
||||
<CommunityIcon />
|
||||
</template>
|
||||
<template #heading>Community</template>
|
||||
|
||||
Got stuck? Ask your question on
|
||||
<a href="https://chat.vuejs.org" target="_blank" rel="noopener">Vue Land</a>
|
||||
(our official Discord server), or
|
||||
<a href="https://stackoverflow.com/questions/tagged/vue.js" target="_blank" rel="noopener"
|
||||
>StackOverflow</a
|
||||
>. You should also follow the official
|
||||
<a href="https://bsky.app/profile/vuejs.org" target="_blank" rel="noopener">@vuejs.org</a>
|
||||
Bluesky account or the
|
||||
<a href="https://x.com/vuejs" target="_blank" rel="noopener">@vuejs</a>
|
||||
X account for latest news in the Vue world.
|
||||
</WelcomeItem>
|
||||
|
||||
<WelcomeItem>
|
||||
<template #icon>
|
||||
<SupportIcon />
|
||||
</template>
|
||||
<template #heading>Support Vue</template>
|
||||
|
||||
As an independent project, Vue relies on community backing for its sustainability. You can help
|
||||
us by
|
||||
<a href="https://vuejs.org/sponsor/" target="_blank" rel="noopener">becoming a sponsor</a>.
|
||||
</WelcomeItem>
|
||||
</template>
|
||||
@@ -1,86 +0,0 @@
|
||||
<template>
|
||||
<div class="item">
|
||||
<i>
|
||||
<slot name="icon"></slot>
|
||||
</i>
|
||||
<div class="details">
|
||||
<h3>
|
||||
<slot name="heading"></slot>
|
||||
</h3>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.item {
|
||||
margin-top: 2rem;
|
||||
display: flex;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.details {
|
||||
flex: 1;
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
i {
|
||||
display: flex;
|
||||
place-items: center;
|
||||
place-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 500;
|
||||
margin-bottom: 0.4rem;
|
||||
color: var(--color-heading);
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.item {
|
||||
margin-top: 0;
|
||||
padding: 0.4rem 0 1rem calc(var(--section-gap) / 2);
|
||||
}
|
||||
|
||||
i {
|
||||
top: calc(50% - 25px);
|
||||
left: -26px;
|
||||
position: absolute;
|
||||
border: 1px solid var(--color-border);
|
||||
background: var(--color-background);
|
||||
border-radius: 8px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.item:before {
|
||||
content: ' ';
|
||||
border-left: 1px solid var(--color-border);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: calc(50% + 25px);
|
||||
height: calc(50% - 25px);
|
||||
}
|
||||
|
||||
.item:after {
|
||||
content: ' ';
|
||||
border-left: 1px solid var(--color-border);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: calc(50% + 25px);
|
||||
height: calc(50% - 25px);
|
||||
}
|
||||
|
||||
.item:first-of-type:before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.item:last-of-type:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,80 +1,44 @@
|
||||
<script setup>
|
||||
import { onMounted, ref, watch ,defineProps} from "vue";
|
||||
import Litepicker from "litepicker";
|
||||
import { useI18n } from "vue-i18n";
|
||||
const { t, locale } = useI18n();
|
||||
<script setup>
|
||||
import { ref, onMounted, watch } from 'vue'
|
||||
import flatpickr from 'flatpickr'
|
||||
import 'flatpickr/dist/flatpickr.css'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
const datepicker = ref(null);
|
||||
var picker = null
|
||||
const { t, locale } = useI18n()
|
||||
|
||||
watch(locale, () => {
|
||||
picker?.setOptions({ lang: locale.value });
|
||||
});
|
||||
|
||||
defineProps({
|
||||
setdef: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
const props = defineProps({
|
||||
modelValue: { type: String, default: '' },
|
||||
placeholder: { type: String, default: '' },
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:modelValue'])
|
||||
|
||||
const inputEl = ref(null)
|
||||
let picker = null
|
||||
|
||||
onMounted(() => {
|
||||
// @formatter:off
|
||||
picker = flatpickr(inputEl.value, {
|
||||
dateFormat: 'Y-m-d',
|
||||
defaultDate: props.modelValue || null,
|
||||
allowInput: true,
|
||||
disableMobile: true,
|
||||
parseDate(datestr) { return new Date(datestr) },
|
||||
onChange(selectedDates, dateStr) { emit('update:modelValue', dateStr) },
|
||||
})
|
||||
})
|
||||
|
||||
picker = new Litepicker({
|
||||
element: datepicker.value,
|
||||
lang: locale.value,
|
||||
firstDay: 0,
|
||||
format: "YYYY-MM-DD", // 日期格式
|
||||
|
||||
dropdowns: {
|
||||
minYear: 1900, // 最小可选年份
|
||||
maxYear: new Date().getFullYear() + 1, // 最大为当前年份
|
||||
months: true, // 显示月份下拉
|
||||
years: true, // 显示年份下拉
|
||||
},
|
||||
//inlineMode: true,
|
||||
});
|
||||
});
|
||||
|
||||
defineExpose({
|
||||
datepicker,
|
||||
|
||||
});
|
||||
watch(() => props.modelValue, (val) => {
|
||||
if (picker && val !== picker.input.value) { picker.setDate(val, false) }
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
<div class="input-icon">
|
||||
<span class="input-icon-addon"
|
||||
><!-- Download SVG icon from http://tabler-icons.io/i/calendar -->
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="icon"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="2"
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<path
|
||||
d="M4 7a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12z"
|
||||
/>
|
||||
<path d="M16 3v4" />
|
||||
<path d="M8 3v4" />
|
||||
<path d="M4 11h16" />
|
||||
<path d="M11 15h1" />
|
||||
<path d="M12 15v3" />
|
||||
<div class="relative">
|
||||
<span class="pointer-events-none absolute inset-y-0 left-3 flex items-center text-gray-400 dark:text-dk-subtle">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 7a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12z"/><path d="M16 3v4"/><path d="M8 3v4"/><path d="M4 11l16 0"/><path d="M11 15h1"/><path d="M12 15v3"/>
|
||||
</svg>
|
||||
</span>
|
||||
<input
|
||||
class="form-control"
|
||||
:placeholder="t('message.select_date')"
|
||||
ref="datepicker"
|
||||
:value="setdef"
|
||||
/>
|
||||
<input ref="inputEl" type="text" :placeholder="placeholder || t('message.select_date')" class="w-full rounded-lg border border-gray-300 bg-white py-2 pr-3 pl-9 text-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 focus:outline-none dark:border-dk-muted dark:bg-dk-card dark:text-dk-text" :value="modelValue" readonly />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -1,93 +1,47 @@
|
||||
<script setup>
|
||||
<script setup>
|
||||
import { onMounted, ref, watch, defineProps, reactive } from "vue";
|
||||
|
||||
import flatpickr from "flatpickr";
|
||||
import "flatpickr/dist/flatpickr.css";
|
||||
import "flatpickr/dist/l10n/zh.js";
|
||||
|
||||
import { useI18n } from "vue-i18n";
|
||||
const { t, locale } = useI18n();
|
||||
|
||||
const datatimepack = ref();
|
||||
|
||||
const prop = defineProps({
|
||||
setdef: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
max_date: {
|
||||
type: [String, Date, Function],
|
||||
default: () => new Date(), // 默认值为当前时间
|
||||
},
|
||||
setdef: { type: String, default: "" },
|
||||
max_date: { type: [String, Date, Function], default: () => new Date() },
|
||||
});
|
||||
|
||||
const datatimepack_config = reactive({
|
||||
enableTime: true,
|
||||
dateFormat: "Y-m-d H:i",
|
||||
minuteIncrement: 1,
|
||||
time_24hr: true,
|
||||
maxDate: prop.max_date, // 只能选择当前时间之前的时间
|
||||
//locale:"zh"
|
||||
maxDate: prop.max_date,
|
||||
});
|
||||
|
||||
const sele_data = reactive();
|
||||
const emit = defineEmits(['update:modelValue'])
|
||||
const handleChange = (e) => {
|
||||
//console.log(e)
|
||||
emit("update:modelValue", e.target.value);
|
||||
};
|
||||
|
||||
const handleChange = (e) => { emit("update:modelValue", e.target.value); };
|
||||
function getCurrentDateTime() {
|
||||
const now = new Date();
|
||||
|
||||
const year = now.getFullYear();
|
||||
const month = String(now.getMonth() + 1).padStart(2, "0"); // 月份从0开始
|
||||
const month = String(now.getMonth() + 1).padStart(2, "0");
|
||||
const day = String(now.getDate()).padStart(2, "0");
|
||||
const hours = String(now.getHours()).padStart(2, "0");
|
||||
const minutes = String(now.getMinutes()).padStart(2, "0");
|
||||
|
||||
return `${year}-${month}-${day} ${hours}:${minutes}`;
|
||||
}
|
||||
|
||||
watch(locale, () => {
|
||||
if (locale.value == "zh-CN") {
|
||||
datatimepack_config.locale = "zh";
|
||||
} else {
|
||||
datatimepack_config.locale = "en";
|
||||
}
|
||||
//console.log(locale.value=="zh-CN"?"zh":"en")
|
||||
if (locale.value == "zh-CN") { datatimepack_config.locale = "zh"; }
|
||||
else { datatimepack_config.locale = "en"; }
|
||||
});
|
||||
|
||||
|
||||
onMounted(() => {
|
||||
// @formatter:off
|
||||
//console.log(getCurrentDateTime())
|
||||
//sele_data=getCurrentDateTime();
|
||||
|
||||
// console.log(prop.setdef)
|
||||
|
||||
if (prop.setdef == "") {
|
||||
datatimepack_config.defaultDate = getCurrentDateTime();
|
||||
} else {
|
||||
datatimepack_config.defaultDate = prop.setdef;
|
||||
}
|
||||
|
||||
if (prop.setdef == "") { datatimepack_config.defaultDate = getCurrentDateTime(); }
|
||||
else { datatimepack_config.defaultDate = prop.setdef; }
|
||||
datatimepack_config.locale = locale.value == "zh-CN" ? "zh" : "en";
|
||||
flatpickr(datatimepack.value, datatimepack_config);
|
||||
|
||||
emit("update:modelValue", datatimepack_config.defaultDate);
|
||||
});
|
||||
|
||||
defineExpose({});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div></div>
|
||||
<input
|
||||
ref="datatimepack"
|
||||
type="datetime-local"
|
||||
class="form-control"
|
||||
|
||||
@input="handleChange"
|
||||
/>
|
||||
<input ref="datatimepack" type="datetime-local" class="w-full rounded-lg border border-gray-300 bg-white py-2 pr-3 text-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 focus:outline-none dark:border-dk-muted dark:bg-dk-card dark:text-dk-text" @input="handleChange" />
|
||||
</template>
|
||||
|
||||
@@ -1,7 +0,0 @@
|
||||
<template>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
|
||||
<path
|
||||
d="M15 4a1 1 0 1 0 0 2V4zm0 11v-1a1 1 0 0 0-1 1h1zm0 4l-.707.707A1 1 0 0 0 16 19h-1zm-4-4l.707-.707A1 1 0 0 0 11 14v1zm-4.707-1.293a1 1 0 0 0-1.414 1.414l1.414-1.414zm-.707.707l-.707-.707.707.707zM9 11v-1a1 1 0 0 0-.707.293L9 11zm-4 0h1a1 1 0 0 0-1-1v1zm0 4H4a1 1 0 0 0 1.707.707L5 15zm10-9h2V4h-2v2zm2 0a1 1 0 0 1 1 1h2a3 3 0 0 0-3-3v2zm1 1v6h2V7h-2zm0 6a1 1 0 0 1-1 1v2a3 3 0 0 0 3-3h-2zm-1 1h-2v2h2v-2zm-3 1v4h2v-4h-2zm1.707 3.293l-4-4-1.414 1.414 4 4 1.414-1.414zM11 14H7v2h4v-2zm-4 0c-.276 0-.525-.111-.707-.293l-1.414 1.414C5.42 15.663 6.172 16 7 16v-2zm-.707 1.121l3.414-3.414-1.414-1.414-3.414 3.414 1.414 1.414zM9 12h4v-2H9v2zm4 0a3 3 0 0 0 3-3h-2a1 1 0 0 1-1 1v2zm3-3V3h-2v6h2zm0-6a3 3 0 0 0-3-3v2a1 1 0 0 1 1 1h2zm-3-3H3v2h10V0zM3 0a3 3 0 0 0-3 3h2a1 1 0 0 1 1-1V0zM0 3v6h2V3H0zm0 6a3 3 0 0 0 3 3v-2a1 1 0 0 1-1-1H0zm3 3h2v-2H3v2zm1-1v4h2v-4H4zm1.707 4.707l.586-.586-1.414-1.414-.586.586 1.414 1.414z"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
@@ -1,7 +0,0 @@
|
||||
<template>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" fill="currentColor">
|
||||
<path
|
||||
d="M11 2.253a1 1 0 1 0-2 0h2zm-2 13a1 1 0 1 0 2 0H9zm.447-12.167a1 1 0 1 0 1.107-1.666L9.447 3.086zM1 2.253L.447 1.42A1 1 0 0 0 0 2.253h1zm0 13H0a1 1 0 0 0 1.553.833L1 15.253zm8.447.833a1 1 0 1 0 1.107-1.666l-1.107 1.666zm0-14.666a1 1 0 1 0 1.107 1.666L9.447 1.42zM19 2.253h1a1 1 0 0 0-.447-.833L19 2.253zm0 13l-.553.833A1 1 0 0 0 20 15.253h-1zm-9.553-.833a1 1 0 1 0 1.107 1.666L9.447 14.42zM9 2.253v13h2v-13H9zm1.553-.833C9.203.523 7.42 0 5.5 0v2c1.572 0 2.961.431 3.947 1.086l1.107-1.666zM5.5 0C3.58 0 1.797.523.447 1.42l1.107 1.666C2.539 2.431 3.928 2 5.5 2V0zM0 2.253v13h2v-13H0zm1.553 13.833C2.539 15.431 3.928 15 5.5 15v-2c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM5.5 15c1.572 0 2.961.431 3.947 1.086l1.107-1.666C9.203 13.523 7.42 13 5.5 13v2zm5.053-11.914C11.539 2.431 12.928 2 14.5 2V0c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM14.5 2c1.573 0 2.961.431 3.947 1.086l1.107-1.666C18.203.523 16.421 0 14.5 0v2zm3.5.253v13h2v-13h-2zm1.553 12.167C18.203 13.523 16.421 13 14.5 13v2c1.573 0 2.961.431 3.947 1.086l1.107-1.666zM14.5 13c-1.92 0-3.703.523-5.053 1.42l1.107 1.666C11.539 15.431 12.928 15 14.5 15v-2z"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
@@ -1,7 +0,0 @@
|
||||
<template>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="20" fill="currentColor">
|
||||
<path
|
||||
d="M11.447 8.894a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm0 1.789a1 1 0 1 0 .894-1.789l-.894 1.789zM7.447 7.106a1 1 0 1 0-.894 1.789l.894-1.789zM10 9a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0H8zm9.447-5.606a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm2 .789a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zM18 5a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0h-2zm-5.447-4.606a1 1 0 1 0 .894-1.789l-.894 1.789zM9 1l.447-.894a1 1 0 0 0-.894 0L9 1zm-2.447.106a1 1 0 1 0 .894 1.789l-.894-1.789zm-6 3a1 1 0 1 0 .894 1.789L.553 4.106zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zm-2-.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 2.789a1 1 0 1 0 .894-1.789l-.894 1.789zM2 5a1 1 0 1 0-2 0h2zM0 7.5a1 1 0 1 0 2 0H0zm8.553 12.394a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 1a1 1 0 1 0 .894 1.789l-.894-1.789zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zM8 19a1 1 0 1 0 2 0H8zm2-2.5a1 1 0 1 0-2 0h2zm-7.447.394a1 1 0 1 0 .894-1.789l-.894 1.789zM1 15H0a1 1 0 0 0 .553.894L1 15zm1-2.5a1 1 0 1 0-2 0h2zm12.553 2.606a1 1 0 1 0 .894 1.789l-.894-1.789zM17 15l.447.894A1 1 0 0 0 18 15h-1zm1-2.5a1 1 0 1 0-2 0h2zm-7.447-5.394l-2 1 .894 1.789 2-1-.894-1.789zm-1.106 1l-2-1-.894 1.789 2 1 .894-1.789zM8 9v2.5h2V9H8zm8.553-4.894l-2 1 .894 1.789 2-1-.894-1.789zm.894 0l-2-1-.894 1.789 2 1 .894-1.789zM16 5v2.5h2V5h-2zm-4.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zm-2.894-1l-2 1 .894 1.789 2-1L8.553.106zM1.447 5.894l2-1-.894-1.789-2 1 .894 1.789zm-.894 0l2 1 .894-1.789-2-1-.894 1.789zM0 5v2.5h2V5H0zm9.447 13.106l-2-1-.894 1.789 2 1 .894-1.789zm0 1.789l2-1-.894-1.789-2 1 .894 1.789zM10 19v-2.5H8V19h2zm-6.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zM2 15v-2.5H0V15h2zm13.447 1.894l2-1-.894-1.789-2 1 .894 1.789zM18 15v-2.5h-2V15h2z"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
@@ -1,7 +0,0 @@
|
||||
<template>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
|
||||
<path
|
||||
d="M10 3.22l-.61-.6a5.5 5.5 0 0 0-7.666.105 5.5 5.5 0 0 0-.114 7.665L10 18.78l8.39-8.4a5.5 5.5 0 0 0-.114-7.665 5.5 5.5 0 0 0-7.666-.105l-.61.61z"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
@@ -1,19 +0,0 @@
|
||||
<!-- This icon is from <https://github.com/Templarian/MaterialDesign>, distributed under Apache 2.0 (https://www.apache.org/licenses/LICENSE-2.0) license-->
|
||||
<template>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
aria-hidden="true"
|
||||
role="img"
|
||||
class="iconify iconify--mdi"
|
||||
width="24"
|
||||
height="24"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
d="M20 18v-4h-3v1h-2v-1H9v1H7v-1H4v4h16M6.33 8l-1.74 4H7v-1h2v1h6v-1h2v1h2.41l-1.74-4H6.33M9 5v1h6V5H9m12.84 7.61c.1.22.16.48.16.8V18c0 .53-.21 1-.6 1.41c-.4.4-.85.59-1.4.59H4c-.55 0-1-.19-1.4-.59C2.21 19 2 18.53 2 18v-4.59c0-.32.06-.58.16-.8L4.5 7.22C4.84 6.41 5.45 6 6.33 6H7V5c0-.55.18-1 .57-1.41C7.96 3.2 8.44 3 9 3h6c.56 0 1.04.2 1.43.59c.39.41.57.86.57 1.41v1h.67c.88 0 1.49.41 1.83 1.22l2.34 5.39z"
|
||||
fill="currentColor"
|
||||
></path>
|
||||
</svg>
|
||||
</template>
|
||||
@@ -1,160 +1,63 @@
|
||||
<script setup>
|
||||
import { Modal } from "@tabler/core";
|
||||
<script setup>
|
||||
import { onMounted, ref } from "vue";
|
||||
import "cropperjs";
|
||||
|
||||
import { useI18n } from "vue-i18n";
|
||||
const { t, locale } = useI18n();
|
||||
|
||||
const cro_sele = ref();
|
||||
const cro_canv = ref();
|
||||
const cro_imag = ref();
|
||||
|
||||
var cor_size_width = 300;
|
||||
var cor_size_height = 300;
|
||||
|
||||
const is_have_URL = ref(false);
|
||||
|
||||
const reader = new FileReader();
|
||||
reader.onload = () => {
|
||||
initCropper(reader.result);
|
||||
};
|
||||
|
||||
reader.onload = () => { initCropper(reader.result); };
|
||||
const emit = defineEmits(['crop_to_canvas'])
|
||||
|
||||
onMounted(() => {
|
||||
cro_sele.value.$change(0, 0, cor_size_width, cor_size_height);
|
||||
cro_canv.value.style.width = cor_size_width.toString() + "px";
|
||||
cro_canv.value.style.height = cor_size_height.toString() + "px";
|
||||
|
||||
cro_imag.value.src = "";
|
||||
|
||||
//console.log(cro_canv.value.clientHeight)
|
||||
});
|
||||
|
||||
function initCropper(imageSrc) {
|
||||
is_have_URL.value = true;
|
||||
cro_imag.value.src = imageSrc;
|
||||
}
|
||||
|
||||
function cancel() {
|
||||
is_have_URL.value = false;
|
||||
}
|
||||
|
||||
function initCropper(imageSrc) { is_have_URL.value = true; cro_imag.value.src = imageSrc; }
|
||||
function cancel() { is_have_URL.value = false; }
|
||||
function inputfile(e) {
|
||||
const file = e.target.files[0];
|
||||
if (!file) {
|
||||
e.target.value = "";
|
||||
is_have_URL.value = false;
|
||||
return;
|
||||
}
|
||||
|
||||
if (!file.type.startsWith("image/")) {
|
||||
e.target.value = "";
|
||||
is_have_URL.value = false;
|
||||
return;
|
||||
}
|
||||
|
||||
const file = e.target.files[0]; if (!file) { e.target.value = ""; is_have_URL.value = false; return; }
|
||||
if (!file.type.startsWith("image/")) { e.target.value = ""; is_have_URL.value = false; return; }
|
||||
reader.readAsDataURL(file);
|
||||
}
|
||||
|
||||
function openFilePicker() {
|
||||
const fileInput = document.createElement("input");
|
||||
fileInput.type = "file";
|
||||
fileInput.accept = "image/*"; // 可选：限制文件类型
|
||||
fileInput.multiple = false; // 可选：是否允许多选
|
||||
|
||||
fileInput.onchange = (e) => {
|
||||
inputfile(e);
|
||||
};
|
||||
|
||||
fileInput.click(); // 触发文件选择
|
||||
fileInput.type = "file"; fileInput.accept = "image/*"; fileInput.multiple = false;
|
||||
fileInput.onchange = (e) => { inputfile(e); };
|
||||
fileInput.click();
|
||||
}
|
||||
|
||||
function getsele() {
|
||||
cro_canv.value.$toCanvas().then((a) => {
|
||||
//console.log(a);
|
||||
//const imageData = a.toDataURL("image/png");
|
||||
|
||||
emit('crop_to_canvas',a)
|
||||
//console.log(imageData);
|
||||
});
|
||||
cro_canv.value.$toCanvas().then((a) => { emit('crop_to_canvas',a) });
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="d-flex flex-column flex-md-row">
|
||||
<div v-show="!is_have_URL" class="col-6 col-sm-4 col-md-2 col-xl py-3">
|
||||
<button class="btn btn-outline-primary" @click="openFilePicker">
|
||||
{{ t("cropper.select_image") }}
|
||||
</button>
|
||||
<div class="flex flex-col md:flex-row">
|
||||
<div v-show="!is_have_URL" class="w-full py-3 md:w-auto md:px-3">
|
||||
<button class="rounded-lg border border-blue-600 px-4 py-2 text-sm font-medium text-blue-600 transition-colors hover:bg-blue-50 dark:border-blue-400 dark:text-blue-400 dark:hover:bg-blue-900/20" @click="openFilePicker">{{ t("cropper.select_image") }}</button>
|
||||
</div>
|
||||
|
||||
<cropper-canvas
|
||||
ref="cro_canv"
|
||||
class="cropper-container"
|
||||
:hidden="!is_have_URL"
|
||||
background
|
||||
scale-step="0.1"
|
||||
>
|
||||
<cropper-image
|
||||
ref="cro_imag"
|
||||
src=""
|
||||
alt="Picture"
|
||||
initialCenterSize="cover"
|
||||
rotatable
|
||||
scalable
|
||||
skewable
|
||||
translatable
|
||||
></cropper-image>
|
||||
<cropper-canvas ref="cro_canv" class="cropper-container" :hidden="!is_have_URL" background scale-step="0.1">
|
||||
<cropper-image ref="cro_imag" src="" alt="Picture" initialCenterSize="cover" rotatable scalable skewable translatable></cropper-image>
|
||||
<cropper-shade hidden></cropper-shade>
|
||||
<cropper-handle action="move" plain></cropper-handle>
|
||||
<cropper-selection ref="cro_sele">
|
||||
<cropper-grid role="grid" covered></cropper-grid>
|
||||
<cropper-crosshair centered></cropper-crosshair>
|
||||
<cropper-handle
|
||||
action="move"
|
||||
theme-color="rgba(255, 255, 255, 0)"
|
||||
></cropper-handle>
|
||||
<cropper-handle action="move" theme-color="rgba(255, 255, 255, 0)"></cropper-handle>
|
||||
</cropper-selection>
|
||||
</cropper-canvas>
|
||||
|
||||
<div v-show="is_have_URL" class="thisbutton">
|
||||
<button class="btn btn-outline-primary" @click="getsele">
|
||||
{{ t("cropper.crop_image") }}
|
||||
</button>
|
||||
<button class="btn btn-outline-danger" @click="cancel">{{ t("cropper.closs") }}</button>
|
||||
<div v-show="is_have_URL" class="mt-3 flex gap-2 md:ml-3 md:mt-0">
|
||||
<button class="rounded-lg border border-blue-600 px-4 py-2 text-sm font-medium text-blue-600 transition-colors hover:bg-blue-50 dark:border-blue-400 dark:text-blue-400 dark:hover:bg-blue-900/20" @click="getsele">{{ t("cropper.crop_image") }}</button>
|
||||
<button class="rounded-lg border border-red-600 px-4 py-2 text-sm font-medium text-red-600 transition-colors hover:bg-red-50 dark:border-red-400 dark:text-red-400 dark:hover:bg-red-900/20" @click="cancel">{{ t("cropper.closs") }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
display: flex;
|
||||
/* 默认就是水平排列 */
|
||||
/* flex-direction: row; */
|
||||
}
|
||||
|
||||
.thisbutton {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: 20px;
|
||||
margin-top: 20px;
|
||||
gap: 20px; /* 所有子元素之间的间距 */
|
||||
}
|
||||
|
||||
.box {
|
||||
margin: 10px;
|
||||
flex-direction: column; /* 关键：改为纵向排列 */
|
||||
}
|
||||
|
||||
.cropper-container {
|
||||
/* 四个角相同圆角 */
|
||||
border-radius: 10px;
|
||||
/* 基本描边 */
|
||||
//border: 2px solid #333;
|
||||
|
||||
/* 基本阴影：x偏移 y偏移 模糊半径 扩展半径 颜色 */
|
||||
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
<style scoped>
|
||||
.cropper-container { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); border-radius: 0.5rem; }
|
||||
</style>
|
||||
|
||||
@@ -1,49 +0,0 @@
|
||||
<script setup>
|
||||
import { RouterLink } from "vue-router";
|
||||
import { useI18n } from "vue-i18n";
|
||||
const { t } = useI18n();
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="col-12 col-md-3 border-end">
|
||||
<div class="card-body">
|
||||
<div class="list-group list-group-transparent">
|
||||
<router-link
|
||||
to="/settings/account"
|
||||
active-class="active"
|
||||
class="list-group-item list-group-item-action d-flex align-items-center"
|
||||
>
|
||||
{{t('settings.basic_information')}}</router-link
|
||||
>
|
||||
</div>
|
||||
<div class="list-group list-group-transparent">
|
||||
<router-link
|
||||
to="/settings/contact"
|
||||
active-class="active"
|
||||
class="list-group-item list-group-item-action d-flex align-items-center"
|
||||
>
|
||||
{{t('settings.contact_information')}}</router-link
|
||||
>
|
||||
</div>
|
||||
<div class="list-group list-group-transparent">
|
||||
<router-link
|
||||
to="/settings/security"
|
||||
active-class="active"
|
||||
class="list-group-item list-group-item-action d-flex align-items-center"
|
||||
>
|
||||
{{t('settings.security_settings')}}</router-link
|
||||
>
|
||||
</div>
|
||||
<!-- <h4 class="subheader mt-4">{{t('settings.admin')}}</h4>
|
||||
<div class="list-group list-group-transparent">
|
||||
<router-link
|
||||
to="/settings/account"
|
||||
class="list-group-item list-group-item-action d-flex align-items-center active"
|
||||
>
|
||||
{{t('settings.website_settings')}}</router-link
|
||||
>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,78 +1,31 @@
|
||||
<script setup>
|
||||
import { onMounted, watch, ref, defineProps, defineEmits } from "vue";
|
||||
<script setup>
|
||||
import { onMounted, ref, defineProps, defineEmits } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
|
||||
import TomSelect from "tom-select";
|
||||
import "tom-select/dist/css/tom-select.css";
|
||||
|
||||
const { t, locale } = useI18n();
|
||||
|
||||
const disable_backspace = ref();
|
||||
|
||||
function sele_tag_init() {
|
||||
new TomSelect(disable_backspace.value, {
|
||||
plugins: ["remove_button"],
|
||||
|
||||
persist: false,
|
||||
createOnBlur: true,
|
||||
create: true,
|
||||
|
||||
// 自定义提示文本
|
||||
render: {
|
||||
no_results: function (data, escape) {
|
||||
return (
|
||||
'<div class="no-results">' + t("tagadder.not_fund_item") + "</div>"
|
||||
);
|
||||
},
|
||||
loading: function (data, escape) {
|
||||
return '<div class="loading">' + t("tagadder.loding") + "</div>";
|
||||
},
|
||||
option_create: function (data, escape) {
|
||||
return (
|
||||
'<div class="create">' +
|
||||
t("tagadder.add") +
|
||||
"<strong>" +
|
||||
escape(data.input) +
|
||||
"</strong></div>"
|
||||
);
|
||||
},
|
||||
no_results: function (data, escape) { return '<div class="no-results">' + t("tagadder.not_fund_item") + "</div>"; },
|
||||
loading: function (data, escape) { return '<div class="loading">' + t("tagadder.loding") + "</div>"; },
|
||||
option_create: function (data, escape) { return '<div class="create">' + t("tagadder.add") + "<strong>" + escape(data.input) + "</strong></div>"; },
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
const props = defineProps({
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
modelValue: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
});
|
||||
|
||||
const props = defineProps({ placeholder: { type: String, default: "" }, modelValue: { type: String, default: "" } });
|
||||
const emit = defineEmits(['update:modelValue'])
|
||||
|
||||
//const emit = defineEmits(['update:modelValue'])
|
||||
|
||||
onMounted(() => {
|
||||
sele_tag_init();
|
||||
});
|
||||
|
||||
const handleChange = (e) => {
|
||||
emit("update:modelValue", e.target.value);
|
||||
};
|
||||
onMounted(() => { sele_tag_init(); });
|
||||
const handleChange = (e) => { emit("update:modelValue", e.target.value); };
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div ref="example_wrapper">
|
||||
<input
|
||||
type="text"
|
||||
ref="disable_backspace"
|
||||
:value="modelValue"
|
||||
@input="handleChange"
|
||||
autocomplete="off"
|
||||
:placeholder="placeholder"
|
||||
/>
|
||||
<input type="text" ref="disable_backspace" :value="modelValue" @input="handleChange" autocomplete="off" :placeholder="placeholder" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -1,464 +1,86 @@
|
||||
<script setup>
|
||||
<script setup>
|
||||
import { ref, onMounted, onUnmounted, defineProps, reactive } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
const { t, locale } = useI18n();
|
||||
import Dropzone from "dropzone";
|
||||
import "dropzone/dist/dropzone.css";
|
||||
|
||||
import { useUserStore } from "@/stores/user";
|
||||
|
||||
import "fslightbox";
|
||||
//var lightbox = new FsLightbox();
|
||||
|
||||
const userStore = useUserStore();
|
||||
|
||||
const dropzoneElement = ref(null);
|
||||
var dropzoneInstance = null;
|
||||
|
||||
const files = reactive([]);
|
||||
|
||||
function get_file_from_uuid(uuid) {
|
||||
if (files.length != 0) {
|
||||
for (var i = 0; i < files.length; i++) {
|
||||
if (files[i].uuid == uuid) {
|
||||
return i;
|
||||
}
|
||||
}
|
||||
return -1;
|
||||
}
|
||||
return -2;
|
||||
if (files.length != 0) { for (var i = 0; i < files.length; i++) { if (files[i].uuid == uuid) { return i; } } return -1; } return -2;
|
||||
}
|
||||
|
||||
function remove_file_from_uuie(uuid) {
|
||||
//devare files[uuid]
|
||||
var id = get_file_from_uuid(uuid);
|
||||
if (id >= 0) {
|
||||
files.splice(id, 1);
|
||||
}
|
||||
}
|
||||
|
||||
function remove_file_from_uuie(uuid) { var id = get_file_from_uuid(uuid); if (id >= 0) { files.splice(id, 1); } }
|
||||
const prop = defineProps({
|
||||
maxFiles: {
|
||||
type: Number,
|
||||
default: 5,
|
||||
},
|
||||
acceptedFiles: {
|
||||
type: String,
|
||||
default: "image/*",
|
||||
},
|
||||
maxFilesize: {
|
||||
type: Number,
|
||||
default: 10,
|
||||
},
|
||||
uploadURL: {
|
||||
type: String,
|
||||
default: "/api/files/upload",
|
||||
},
|
||||
maxFiles: { type: Number, default: 5 },
|
||||
acceptedFiles: { type: String, default: "image/*" },
|
||||
maxFilesize: { type: Number, default: 10 },
|
||||
uploadURL: { type: String, default: "/api/files/upload" },
|
||||
});
|
||||
|
||||
// 初始化 Dropzone
|
||||
const initDropzone = () => {
|
||||
if (!dropzoneElement.value) return;
|
||||
|
||||
// 禁用自动发现
|
||||
Dropzone.autoDiscover = false;
|
||||
|
||||
// 移除任何现有的 Dropzone 实例
|
||||
if (dropzoneInstance) {
|
||||
dropzoneInstance.destroy();
|
||||
}
|
||||
|
||||
// 初始化新的实例
|
||||
if (dropzoneInstance) { dropzoneInstance.destroy(); }
|
||||
dropzoneInstance = new Dropzone(dropzoneElement.value, {
|
||||
url: prop.uploadURL, // 上传地址
|
||||
// headers: {
|
||||
// user_cookie: "cccc",
|
||||
// },
|
||||
url: prop.uploadURL,
|
||||
method: "post",
|
||||
|
||||
//uploadMultiple: true,
|
||||
|
||||
previewTemplate: document.getElementById("custom-template").innerHTML,
|
||||
|
||||
parallelUploads: 3, // 同时上传的文件数
|
||||
maxFilesize: prop.maxFilesize, // MB
|
||||
maxFiles: prop.maxFiles, // 最大文件数
|
||||
acceptedFiles: prop.acceptedFiles, // 接受的文件类型
|
||||
//addRemoveLinks: true, // 显示移除链接
|
||||
parallelUploads: 3,
|
||||
maxFilesize: prop.maxFilesize,
|
||||
maxFiles: prop.maxFiles,
|
||||
acceptedFiles: prop.acceptedFiles,
|
||||
dictDefaultMessage: t("dropzone.upload_drop_or_click"),
|
||||
dictFallbackMessage: t("dropzone.upload_browser_not_supported"),
|
||||
dictFivarooBig:
|
||||
t("dropzone.upload_file_too_big") +
|
||||
"({{filesize}}MB). " +
|
||||
t("dropzone.upload_max_file_size") +
|
||||
"{{maxFilesize}}MB.",
|
||||
dictInvalidFivarype: t("dropzone.upload_invalid_file_type"),
|
||||
dictFileTooBig: t("dropzone.upload_file_too_big") + "({{filesize}}MB). " + t("dropzone.upload_max_file_size") + "{{maxFilesize}}MB.",
|
||||
dictInvalidFileType: t("dropzone.upload_invalid_file_type"),
|
||||
dictResponseError: t("dropzone.upload_server_error") + "{{statusCode}}",
|
||||
//dictCancelUpload: t('dropzone.upload_cancel'),
|
||||
//dictUploadCanceled: t('dropzone.upload_canceled'),
|
||||
//dictCancelUploadConfirmation: t('dropzone.upload_cancel_confirmation'),
|
||||
dictRemoveFile: t("dropzone.upload_remove_file"),
|
||||
dictMaxFilesExceeded:
|
||||
t("dropzone.upload_max_files") +
|
||||
"{{maxFiles}}" +
|
||||
t("dropzone.upload_max_files_unit"),
|
||||
|
||||
// 事件处理
|
||||
init: function () {
|
||||
this.on("success", (file, response) => {
|
||||
//console.log("上传成功:", file, response);
|
||||
file.previewElement.addEventListener("click", function (e) {
|
||||
//delete lightbox
|
||||
const lightbox = new FsLightbox();
|
||||
//console.log(files)
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
// 处理点击事件
|
||||
//console.log("缩略图被点击", file);
|
||||
|
||||
//动态把文件载入灯箱
|
||||
//先移除原有数据
|
||||
//lightbox.props.sources.splice(0, lightbox.props.sources.length);
|
||||
|
||||
var dis_id = 0;
|
||||
var dis_id_t = 0;
|
||||
for (var i = 0; i < files.length; i++) {
|
||||
if (files[i]["is_upload"] == true) {
|
||||
lightbox.props.sources.push(files[i]["get_url"]);
|
||||
if (files[i]["uuid"] == file.upload.uuid) {
|
||||
dis_id = dis_id_t;
|
||||
}
|
||||
}
|
||||
dis_id_t += 1;
|
||||
}
|
||||
|
||||
lightbox.open(dis_id);
|
||||
});
|
||||
|
||||
var file_id = get_file_from_uuid(file.upload.uuid);
|
||||
if (file_id >= 0) {
|
||||
files[file_id]["hash"] = response.return.hash;
|
||||
files[file_id]["get_url"] = response.return.get;
|
||||
files[file_id]["download_url"] = response.return.download;
|
||||
files[file_id]["file_name"] = file.name;
|
||||
files[file_id]["file_size"] = file.size;
|
||||
|
||||
files[file_id]["is_upload"] = true;
|
||||
|
||||
//console.log(files)
|
||||
dictMaxFilesExceeded: t("dropzone.upload_max_files") + " " + prop.maxFiles + t("dropzone.upload_max_files_unit"),
|
||||
init: function() {
|
||||
this.on("sending", function(file, xhr, formData) {
|
||||
formData.append("cookie", userStore.cookieValue);
|
||||
});
|
||||
this.on("success", function(file, serverResponse) {
|
||||
const data = JSON.parse(serverResponse);
|
||||
if (data.return && data.return.uuid) {
|
||||
file.uuid = data.return.uuid;
|
||||
files.push({ uuid: data.return.uuid, name: file.name, url: data.return.url || "" });
|
||||
}
|
||||
|
||||
//files.push(t)
|
||||
// files[file.upload.uuid]=t
|
||||
// console.log(files)
|
||||
|
||||
// lightbox.props.sources.push(t.get_url)
|
||||
// console.log(lightbox)
|
||||
});
|
||||
this.on("error", (file, errorMessage) => {
|
||||
console.error("上传失败:", file.name, errorMessage);
|
||||
});
|
||||
this.on("removedfile", (file) => {
|
||||
//console.log("remove:", file);
|
||||
//files.value = files.value.filter(f => f.name !== file.name)
|
||||
remove_file_from_uuie(file.upload.uuid);
|
||||
//console.log(files)
|
||||
});
|
||||
this.on("addedfile", (file) => {
|
||||
//添加文件
|
||||
|
||||
//控制排序 需要从添加文件开始操作
|
||||
|
||||
//限制文件数量
|
||||
if (files.length < prop.maxFiles) {
|
||||
var t = {
|
||||
uuid: file.upload.uuid,
|
||||
is_upload: false,
|
||||
};
|
||||
files.push(t);
|
||||
} else {
|
||||
this.removeFile(file);
|
||||
}
|
||||
|
||||
//console.log(files);
|
||||
});
|
||||
this.on("sending", function (file, xhr, formData) {
|
||||
// 获取表单值并添加到 FormData
|
||||
//console.log(userStore.userCookie.Value)
|
||||
formData.append("cookie", userStore.userCookie.Value);
|
||||
this.on("removedfile", function(file) {
|
||||
if (file.uuid) { remove_file_from_uuie(file.uuid); }
|
||||
});
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
// 自定义方法
|
||||
// const formatBytes = (bytes, decimals = 2) => {
|
||||
// if (bytes === 0) return '0 Bytes'
|
||||
// const k = 1024
|
||||
// const dm = decimals < 0 ? 0 : decimals
|
||||
// const sizes = ['Bytes', 'KB', 'MB', 'GB']
|
||||
// const i = Math.floor(Math.log(bytes) / Math.log(k))
|
||||
// return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i]
|
||||
// }
|
||||
|
||||
// // 手动添加文件的方法
|
||||
// const addFiles = (fileList) => {
|
||||
// if (dropzoneInstance) {
|
||||
// Array.from(fileList).forEach(file => {
|
||||
// dropzoneInstance.addFile(file)
|
||||
// })
|
||||
// }
|
||||
// }
|
||||
|
||||
// // 获取所有已添加的文件
|
||||
// const getAllFiles = () => {
|
||||
// return dropzoneInstance ? dropzoneInstance.files : []
|
||||
// }
|
||||
|
||||
// // 清除所有文件
|
||||
// const removeAllFiles = () => {
|
||||
// if (dropzoneInstance) {
|
||||
// dropzoneInstance.removeAllFiles(true)
|
||||
// }
|
||||
// }
|
||||
|
||||
function return_files() {
|
||||
return files;
|
||||
}
|
||||
|
||||
// 组件挂载时初始化
|
||||
onMounted(() => {
|
||||
initDropzone();
|
||||
|
||||
//console.log(lightbox)
|
||||
});
|
||||
|
||||
// 组件卸载时销毁
|
||||
onUnmounted(() => {
|
||||
if (dropzoneInstance) {
|
||||
dropzoneInstance.destroy();
|
||||
}
|
||||
});
|
||||
|
||||
defineExpose({
|
||||
return_files,
|
||||
});
|
||||
const emit = defineEmits(['files-updated', 'uuid-updated'])
|
||||
onMounted(() => { initDropzone(); });
|
||||
onUnmounted(() => { if (dropzoneInstance) { dropzoneInstance.destroy(); } });
|
||||
defineExpose({ getFiles: () => files, getDropzone: () => dropzoneInstance });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div id="custom-template" style="display: none">
|
||||
<div class="dz-preview dz-file-preview my-custom-style">
|
||||
<div class="remove-btn" data-dz-remove>
|
||||
<!-- <i class="bi bi-x"></i> -->
|
||||
X
|
||||
</div>
|
||||
<div class="dz-image">
|
||||
<img data-dz-thumbnail alt="File preview" />
|
||||
<!-- 缩略图 -->
|
||||
</div>
|
||||
<div class="dz-details">
|
||||
<div class="dz-filename"><span data-dz-name></span></div>
|
||||
<!-- 文件名 -->
|
||||
<div class="dz-size"><span data-dz-size></span></div>
|
||||
<!-- 文件大小 -->
|
||||
</div>
|
||||
<div class="dz-progress">
|
||||
<span class="dz-upload" data-dz-uploadprogress></span>
|
||||
<!-- 进度条 -->
|
||||
</div>
|
||||
<div class="dz-success-mark" data-dz-successmark>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
class="icon icon-tabler icons-tabler-outline icon-tabler-circle-check"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<path d="M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" />
|
||||
<path d="M9 12l2 2l4 -4" />
|
||||
</svg>
|
||||
</div>
|
||||
<!-- 成功标记 -->
|
||||
<div class="dz-error-mark" data-dz-errormark>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="240"
|
||||
height="240"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
class="icon icon-tabler icons-tabler-outline icon-tabler-circle-x"
|
||||
>
|
||||
<path stroke="none" fill="none" d="M0 0h24v24H0z" />
|
||||
<path d="M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" />
|
||||
<path d="M10 10l4 4m0 -4l-4 4" />
|
||||
</svg>
|
||||
</div>
|
||||
<!-- 错误标记 -->
|
||||
<div class="dz-error-message"><span data-dz-errormessage></span></div>
|
||||
<!-- 错误信息 -->
|
||||
|
||||
<!-- 移除按钮 -->
|
||||
<div class="w-full">
|
||||
<div id="custom-template" class="dz-preview dz-file-preview hidden">
|
||||
<div class="relative inline-block rounded-lg border border-gray-200 bg-white p-2 dark:border-dk-muted dark:bg-dk-card">
|
||||
<img data-dz-thumbnail class="h-20 w-20 rounded object-cover" />
|
||||
<button data-dz-remove class="absolute -right-2 -top-2 flex h-6 w-6 items-center justify-center rounded-full bg-red-500 text-xs font-bold text-white shadow hover:bg-red-600">×</button>
|
||||
</div>
|
||||
<div class="mt-1 max-w-[5rem] truncate text-xs text-gray-600 dark:text-dk-subtle" data-dz-name></div>
|
||||
<div class="dz-progress mt-1 h-1 w-full rounded-full bg-gray-200 dark:bg-dk-muted"><span class="dz-upload block h-full rounded-full bg-blue-500" data-dz-uploadprogress></span></div>
|
||||
<div class="dz-error-message mt-1 text-xs text-red-500"><span data-dz-errormessage></span></div>
|
||||
</div>
|
||||
<div ref="dropzoneElement" class="dropzone cursor-pointer rounded-xl border-2 border-dashed border-gray-300 bg-gray-50 p-8 text-center transition-colors hover:border-blue-400 hover:bg-blue-50 dark:border-dk-muted dark:bg-dk-base dark:hover:border-blue-500 dark:hover:bg-dk-card">
|
||||
<div class="mb-2 text-4xl">📁</div>
|
||||
<div class="text-sm font-medium text-gray-600 dark:text-dk-subtle">{{ t('dropzone.upload_drop_or_click') }}</div>
|
||||
</div>
|
||||
|
||||
<div class="text-end">{{ files.length }}/{{ maxFiles }}</div>
|
||||
<div ref="dropzoneElement" class="dropzone"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.dz_mark {
|
||||
height: 60px;
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
.thumbnail-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 15px;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
background-color: white;
|
||||
border-radius: 15px;
|
||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
/* 缩略图样式 */
|
||||
.thumbnail {
|
||||
width: var(--thumbnail-size);
|
||||
height: var(--thumbnail-size);
|
||||
border-radius: var(--border-radius);
|
||||
object-fit: cover;
|
||||
border: 2px solid #e9ecef;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.thumbnail:hover {
|
||||
transform: scale(1.05);
|
||||
border-color: #6c757d;
|
||||
}
|
||||
|
||||
/* 缩略图包装器 */
|
||||
.thumbnail-wrapper {
|
||||
position: relative;
|
||||
width: var(--thumbnail-size);
|
||||
height: var(--thumbnail-size);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
/* 移除按钮 */
|
||||
.remove-btn {
|
||||
position: absolute;
|
||||
top: -12px;
|
||||
right: -12px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
background-color: #dc3545;
|
||||
color: white;
|
||||
border: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
z-index: 10;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.remove-btn:hover {
|
||||
background-color: #bb2d3b;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
/* 文件名称 */
|
||||
.file-name {
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
max-width: 100px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
color: #495057;
|
||||
}
|
||||
|
||||
/* 上传区域 */
|
||||
.upload-area {
|
||||
border: 2px dashed #dee2e6;
|
||||
border-radius: 15px;
|
||||
padding: 30px;
|
||||
text-align: center;
|
||||
background-color: #f8f9fa;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.upload-area:hover {
|
||||
border-color: #6c757d;
|
||||
background-color: #e9ecef;
|
||||
}
|
||||
|
||||
.upload-icon {
|
||||
font-size: 48px;
|
||||
color: #6c757d;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.preview-title {
|
||||
color: #343a40;
|
||||
border-bottom: 2px solid #e9ecef;
|
||||
padding-bottom: 10px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 40px 20px;
|
||||
color: #6c757d;
|
||||
}
|
||||
|
||||
.empty-state i {
|
||||
font-size: 48px;
|
||||
margin-bottom: 15px;
|
||||
color: #adb5bd;
|
||||
}
|
||||
|
||||
.counter-badge {
|
||||
position: absolute;
|
||||
top: -5px;
|
||||
right: -5px;
|
||||
background-color: #0d6efd;
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
font-size: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.thumbnail-actions {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.file-input {
|
||||
display: none;
|
||||
}
|
||||
.dropzone { min-height: 150px; }
|
||||
.dz-progress .dz-upload { transition: width 0.3s ease; }
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user