Update .hintrc to disable no-inline-styles hint, modify GlobalMessage.vue to reposition snackbar, remove AppFooter from default layout, and enhance index.vue with a floating toolbar and ICP component. Clean up unused imports in settings.vue.
This commit is contained in:
SunWuyuan
@@ -0,0 +1,77 @@
|
||||
<template>
|
||||
<v-slide-x-transition>
|
||||
<v-card
|
||||
class="floating-icp"
|
||||
elevation="2"
|
||||
rounded="pill"
|
||||
variant="tonal"
|
||||
color="surface-variant"
|
||||
@mouseenter="isHovered = true"
|
||||
@mouseleave="isHovered = false"
|
||||
>
|
||||
<v-btn
|
||||
variant="text"
|
||||
class="icp-button"
|
||||
href="https://beian.miit.gov.cn/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<v-icon
|
||||
icon="mdi-shield-check"
|
||||
size="small"
|
||||
:class="{ 'rotate-icon': isHovered }"
|
||||
class="mr-1"
|
||||
/>
|
||||
<span class="text-caption">浙ICP备2024068645号</span>
|
||||
</v-btn>
|
||||
</v-card>
|
||||
</v-slide-x-transition>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'FloatingICP',
|
||||
data() {
|
||||
return {
|
||||
isHovered: false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.floating-icp {
|
||||
position: fixed;
|
||||
bottom: 24px;
|
||||
right: 24px;
|
||||
z-index: 100;
|
||||
transition: all 0.3s ease;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.floating-icp:hover {
|
||||
transform: translateX(-4px);
|
||||
}
|
||||
|
||||
.icp-button {
|
||||
padding: 0 16px;
|
||||
height: 32px;
|
||||
min-width: unset;
|
||||
}
|
||||
|
||||
.rotate-icon {
|
||||
transform: rotate(360deg);
|
||||
transition: transform 0.6s ease;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.floating-icp {
|
||||
right: 16px;
|
||||
bottom: 80px; /* 避免与其他悬浮组件重叠 */
|
||||
}
|
||||
|
||||
.icp-button {
|
||||
padding: 0 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,203 @@
|
||||
<template>
|
||||
<v-slide-y-transition>
|
||||
<v-card
|
||||
class="floating-toolbar"
|
||||
elevation="4"
|
||||
rounded="xl"
|
||||
:class="{ 'toolbar-expanded': isExpanded }"
|
||||
>
|
||||
|
||||
|
||||
<v-btn-group variant="text" class="toolbar-buttons">
|
||||
<v-btn
|
||||
icon="mdi-chevron-left"
|
||||
variant="text"
|
||||
@click="$emit('prev-day')"
|
||||
:title="'查看昨天'"
|
||||
class="toolbar-btn"
|
||||
v-ripple
|
||||
/>
|
||||
<v-btn
|
||||
icon="mdi-format-font-size-decrease"
|
||||
variant="text"
|
||||
@click="$emit('zoom', 'out')"
|
||||
:title="'缩小字体'"
|
||||
class="toolbar-btn"
|
||||
v-ripple
|
||||
/>
|
||||
<v-btn
|
||||
icon="mdi-format-font-size-increase"
|
||||
variant="text"
|
||||
@click="$emit('zoom', 'up')"
|
||||
:title="'放大字体'"
|
||||
class="toolbar-btn"
|
||||
v-ripple
|
||||
/>
|
||||
<v-menu location="top" :close-on-content-click="false">
|
||||
<template #activator="{ props }">
|
||||
<v-btn
|
||||
icon="mdi-calendar"
|
||||
variant="text"
|
||||
v-bind="props"
|
||||
:title="'选择日期'"
|
||||
class="toolbar-btn"
|
||||
v-ripple
|
||||
/>
|
||||
</template>
|
||||
<v-card border class="date-picker-card">
|
||||
<v-date-picker
|
||||
:model-value="selectedDate"
|
||||
color="primary"
|
||||
@update:model-value="handleDateSelect"
|
||||
/>
|
||||
</v-card>
|
||||
</v-menu>
|
||||
<v-btn
|
||||
icon="mdi-refresh"
|
||||
variant="text"
|
||||
:loading="loading"
|
||||
@click="$emit('refresh')"
|
||||
:title="'刷新数据'"
|
||||
class="toolbar-btn"
|
||||
v-ripple
|
||||
/>
|
||||
|
||||
<v-btn
|
||||
v-if="!isToday"
|
||||
icon="mdi-chevron-right"
|
||||
variant="text"
|
||||
@click="$emit('next-day')"
|
||||
:title="'查看明天'"
|
||||
class="toolbar-btn"
|
||||
v-ripple
|
||||
/>
|
||||
</v-btn-group>
|
||||
|
||||
|
||||
</v-card>
|
||||
</v-slide-y-transition>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "FloatingToolbar",
|
||||
props: {
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
unreadCount: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
selectedDate: {
|
||||
type: [String, Date],
|
||||
required: true,
|
||||
},
|
||||
isToday: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isExpanded: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleDateSelect(newDate) {
|
||||
this.$emit("date-select", newDate);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.floating-toolbar {
|
||||
position: fixed;
|
||||
bottom: 24px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 100;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
background: rgba(255, 255, 255, 0.7) !important;
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
|
||||
touch-action: none;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-webkit-touch-callout: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 0px;
|
||||
}
|
||||
|
||||
.floating-toolbar:hover {
|
||||
transform: translateX(-50%) translateY(-4px);
|
||||
background: rgba(255, 255, 255, 0.8) !important;
|
||||
}
|
||||
|
||||
.toolbar-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.3) !important;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.toolbar-btn:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
.date-picker-card {
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
background: rgba(255, 255, 255, 0.9) !important;
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.floating-toolbar {
|
||||
bottom: 16px;
|
||||
width: 95%;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.toolbar-buttons {
|
||||
width: 100%;
|
||||
justify-content: space-around;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.toolbar-btn {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
margin: 0 2px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Dark mode support */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.floating-toolbar {
|
||||
background: rgba(30, 30, 30, 0.7) !important;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.floating-toolbar:hover {
|
||||
background: rgba(30, 30, 30, 0.8) !important;
|
||||
}
|
||||
|
||||
.toolbar-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.1) !important;
|
||||
}
|
||||
|
||||
.date-picker-card {
|
||||
background: rgba(30, 30, 30, 0.9) !important;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -3,7 +3,7 @@
|
||||
v-model="snackbar"
|
||||
:color="colors[message?.type] || colors.info"
|
||||
:timeout="2000"
|
||||
location="bottom"
|
||||
location="top right"
|
||||
multi-line
|
||||
variant="tonal"
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user