优化卡片
This commit is contained in:
hero920103 committed
1 parent
e34543465a
commit
8acbe732ff
8 files changed
+181
-21
No files matched your search
@@ -99,8 +99,19 @@ export const useTabsStore = defineTabsStore('tabs', () => {
|
||||
function setDefaultTab(tab) {
|
||||
const path = tab?.fullPath || '';
|
||||
if (!path) return;
|
||||
const prevDefault = defaultDashboardPath.value;
|
||||
defaultDashboardPath.value = path;
|
||||
|
||||
// 默认工作台路径变化 = 切换了模块：关闭旧模块的全部 tab，
|
||||
// 只保留新模块的默认工作台。
|
||||
// prevDefault 为空（首次设置，如刷新后恢复）时不清空，保留恢复出来的 tabs。
|
||||
if (prevDefault && prevDefault !== path) {
|
||||
tabList.value = [tab];
|
||||
activeTab.value = path;
|
||||
saveTabsToStorage(tabList.value, activeTab.value);
|
||||
return;
|
||||
}
|
||||
|
||||
const idx = tabList.value.findIndex(t => t.fullPath === path);
|
||||
if (idx === -1) {
|
||||
tabList.value.unshift(tab);
|
||||
|
||||
@@ -1253,29 +1253,77 @@ onUnmounted(() => {
|
||||
border-color: #3d3d3d;
|
||||
}
|
||||
|
||||
// 暗色主题下未开通卡片
|
||||
&.disabled {
|
||||
background: #222;
|
||||
border-color: #333;
|
||||
// 暗色主题 hover：用深灰浮起替代亮色主题的「蓝底白字」效果
|
||||
&:hover {
|
||||
transform: translateY(-2px);
|
||||
background: #222222;
|
||||
border-color: #4d4d4d;
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
|
||||
|
||||
.card-title {
|
||||
color: #666 !important;
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
.card-desc {
|
||||
color: #a8abb2 !important;
|
||||
}
|
||||
|
||||
.card-icon-wrapper {
|
||||
color: #555;
|
||||
color: var(--yz-primary);
|
||||
}
|
||||
|
||||
.card-divider {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// 暗色主题下未开通卡片
|
||||
&.disabled {
|
||||
background: #222222;
|
||||
border-color: #333333;
|
||||
|
||||
.card-title {
|
||||
color: #666666 !important;
|
||||
}
|
||||
|
||||
.card-icon-wrapper {
|
||||
color: #555555;
|
||||
}
|
||||
|
||||
.card-divider {
|
||||
border-color: #2e2e2e;
|
||||
}
|
||||
|
||||
// 未开通卡片 hover：保持置灰，不闪浅色底也不浮起
|
||||
&:hover {
|
||||
transform: none;
|
||||
background: #222222;
|
||||
border-color: #333333;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
|
||||
|
||||
.card-title {
|
||||
color: #666666 !important;
|
||||
}
|
||||
|
||||
.card-desc {
|
||||
color: #6b6b6b !important;
|
||||
}
|
||||
|
||||
.card-icon-wrapper {
|
||||
color: #555555;
|
||||
}
|
||||
|
||||
.card-divider {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.card-locked .lock-icon {
|
||||
color: #555;
|
||||
color: #555555;
|
||||
}
|
||||
|
||||
.card-locked .lock-tip {
|
||||
color: #666;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1304,6 +1352,32 @@ onUnmounted(() => {
|
||||
color: #8c8c8c !important;
|
||||
}
|
||||
|
||||
// 暗色主题 hover：深灰浮起，替代亮蓝底
|
||||
.modules-section .module-card:hover {
|
||||
transform: translateY(-2px);
|
||||
background: #222222;
|
||||
border-color: #4d4d4d;
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
|
||||
}
|
||||
|
||||
.modules-section .module-card:hover .card-desc {
|
||||
color: #a8abb2 !important;
|
||||
}
|
||||
|
||||
// 未开通卡片 hover：保持置灰不浮起
|
||||
.modules-section .module-card.disabled:hover,
|
||||
.modules-section .module-card.is-locked:hover {
|
||||
transform: none;
|
||||
background: #1f1f1f;
|
||||
border-color: #333333;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.modules-section .module-card.disabled:hover .card-desc,
|
||||
.modules-section .module-card.is-locked:hover .card-desc {
|
||||
color: #6b6b6b !important;
|
||||
}
|
||||
|
||||
.modules-section .module-card.is-locked {
|
||||
background: #1f1f1f;
|
||||
|
||||
|
||||
@@ -75,6 +75,8 @@ const channelTextMap = {
|
||||
EMAIL: '邮件',
|
||||
BARK: 'Bark 推送',
|
||||
SITE_MSG: '站内信',
|
||||
WECHAT_MP: '微信服务号',
|
||||
WECHAT_MINI: '小程序订阅',
|
||||
}
|
||||
|
||||
const channelColorMap = {
|
||||
@@ -82,6 +84,8 @@ const channelColorMap = {
|
||||
EMAIL: 'warning',
|
||||
BARK: 'danger',
|
||||
SITE_MSG: 'primary',
|
||||
WECHAT_MP: 'success',
|
||||
WECHAT_MINI: 'success',
|
||||
}
|
||||
|
||||
function channelText(ch) {
|
||||
|
||||
@@ -43,7 +43,12 @@
|
||||
<el-checkbox value="EMAIL">邮件 (EMAIL)</el-checkbox>
|
||||
<el-checkbox value="BARK">Bark 推送</el-checkbox>
|
||||
<el-checkbox value="SITE_MSG">站内信 (SITE_MSG)</el-checkbox>
|
||||
<el-checkbox value="WECHAT_MP">微信服务号</el-checkbox>
|
||||
<el-checkbox value="WECHAT_MINI">小程序订阅</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
<span class="form-tip">
|
||||
微信服务号：需认证服务号且在个人中心完成账号绑定并关注；小程序订阅：需在小程序内授权过订阅消息（一次授权仅可发送一条）。两者均为一次性发送。
|
||||
</span>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="提前提醒分钟" prop="advance_minutes">
|
||||
@@ -200,7 +205,7 @@ async function handleTest() {
|
||||
|
||||
if (res?.code === 200 && Array.isArray(res.data)) {
|
||||
const lines = res.data.map(item => {
|
||||
const name = { SMS: '短信', EMAIL: '邮件', BARK: 'Bark推送', SITE_MSG: '站内信' }[item.channel] || item.channel
|
||||
const name = { SMS: '短信', EMAIL: '邮件', BARK: 'Bark推送', SITE_MSG: '站内信', WECHAT_MP: '微信服务号', WECHAT_MINI: '小程序订阅' }[item.channel] || item.channel
|
||||
const status = item.success
|
||||
? '<span style="color: #67C23A; font-weight: bold;">发送成功</span>'
|
||||
: `<span style="color: #F56C6C; font-weight: bold;">发送失败 (${item.msg})</span>`
|
||||
|
||||
@@ -168,6 +168,8 @@ const channelTextMap = {
|
||||
EMAIL: '邮件',
|
||||
BARK: 'Bark',
|
||||
SITE_MSG: '站内信',
|
||||
WECHAT_MP: '微信服务号',
|
||||
WECHAT_MINI: '小程序订阅',
|
||||
}
|
||||
|
||||
const channelColorMap = {
|
||||
@@ -175,6 +177,8 @@ const channelColorMap = {
|
||||
EMAIL: 'warning',
|
||||
BARK: 'danger',
|
||||
SITE_MSG: 'primary',
|
||||
WECHAT_MP: 'success',
|
||||
WECHAT_MINI: 'success',
|
||||
}
|
||||
|
||||
function channelText(ch) {
|
||||
|
||||
Reference in new issue
Block a user