chore: polish desktop navigation and account menu
This commit is contained in:
@@ -1357,7 +1357,7 @@ function releaseSize(value?: number | null): string {
|
|||||||
<a-dropdown :trigger="['click']" placement="bottomRight" overlayClassName="premium-unbind-dropdown">
|
<a-dropdown :trigger="['click']" placement="bottomRight" overlayClassName="premium-unbind-dropdown">
|
||||||
<a-button
|
<a-button
|
||||||
type="text"
|
type="text"
|
||||||
class="media-card__more action-more-btn"
|
class="media-card__more"
|
||||||
:loading="isAccountDeleteRequestPending(account.id)"
|
:loading="isAccountDeleteRequestPending(account.id)"
|
||||||
@click.stop
|
@click.stop
|
||||||
>
|
>
|
||||||
@@ -3021,20 +3021,25 @@ function releaseSize(value?: number | null): string {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.media-card__more.ant-btn-text {
|
.media-card__more.ant-btn-text {
|
||||||
width: 34px;
|
width: 32px;
|
||||||
height: 34px;
|
height: 32px;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
border-radius: 8px;
|
border-radius: 50%;
|
||||||
color: #94a3b8;
|
color: #64748b;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
border: 1px solid transparent;
|
border: none;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 0;
|
||||||
|
transition: all 0.2s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.media-card__more.ant-btn-text:hover,
|
.media-card__more.ant-btn-text:hover,
|
||||||
.media-card__more.ant-btn-text:focus {
|
.media-card__more.ant-btn-text:focus {
|
||||||
color: #334155;
|
color: #0f172a;
|
||||||
background: #f8fafc;
|
background: #f1f5f9;
|
||||||
border-color: #e2e8f0;
|
border: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Circular Avatar glow container */
|
/* Circular Avatar glow container */
|
||||||
|
|||||||
@@ -3,6 +3,8 @@ import {
|
|||||||
AppstoreOutlined,
|
AppstoreOutlined,
|
||||||
BugOutlined,
|
BugOutlined,
|
||||||
DownloadOutlined,
|
DownloadOutlined,
|
||||||
|
ExportOutlined,
|
||||||
|
GlobalOutlined,
|
||||||
LinkOutlined,
|
LinkOutlined,
|
||||||
LogoutOutlined,
|
LogoutOutlined,
|
||||||
RobotOutlined,
|
RobotOutlined,
|
||||||
@@ -243,6 +245,10 @@ function openUpdateManualDownload() {
|
|||||||
void openManualDownload()
|
void openManualDownload()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function openOfficialWebsite() {
|
||||||
|
void window.desktopBridge.app.openExternalUrl('https://saas.shengxintui.com')
|
||||||
|
}
|
||||||
|
|
||||||
function quitApp() {
|
function quitApp() {
|
||||||
void window.desktopBridge.app.quitApp()
|
void window.desktopBridge.app.quitApp()
|
||||||
}
|
}
|
||||||
@@ -294,6 +300,22 @@ watch(
|
|||||||
</div>
|
</div>
|
||||||
<span class="nav-count">{{ item.count }}</span>
|
<span class="nav-count">{{ item.count }}</span>
|
||||||
</RouterLink>
|
</RouterLink>
|
||||||
|
|
||||||
|
<div class="nav-divider" aria-hidden="true"></div>
|
||||||
|
|
||||||
|
<a
|
||||||
|
href="https://saas.shengxintui.com"
|
||||||
|
class="nav-link external-link"
|
||||||
|
@click.prevent="openOfficialWebsite"
|
||||||
|
>
|
||||||
|
<div class="nav-copy">
|
||||||
|
<GlobalOutlined class="nav-icon" />
|
||||||
|
<strong>打开官网</strong>
|
||||||
|
</div>
|
||||||
|
<span class="external-icon-wrapper">
|
||||||
|
<ExportOutlined class="external-icon" />
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<footer class="sidebar-footer">
|
<footer class="sidebar-footer">
|
||||||
@@ -650,6 +672,42 @@ h1 {
|
|||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.nav-divider {
|
||||||
|
height: 1px;
|
||||||
|
background: #e2e8f0;
|
||||||
|
margin: 6px 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.external-link {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.external-icon-wrapper {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 28px;
|
||||||
|
height: 28px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: transparent;
|
||||||
|
color: #94a3b8;
|
||||||
|
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-link.external-link:hover .external-icon-wrapper {
|
||||||
|
background: #f1f5f9;
|
||||||
|
color: #1677ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.external-icon {
|
||||||
|
font-size: 11px;
|
||||||
|
transition: transform 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-link.external-link:hover .external-icon {
|
||||||
|
transform: translate(1px, -1px);
|
||||||
|
}
|
||||||
|
|
||||||
.sidebar-footer {
|
.sidebar-footer {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|||||||
@@ -840,7 +840,7 @@ const tableScroll = { x: 1080 } as const
|
|||||||
<section class="hero-card">
|
<section class="hero-card">
|
||||||
<div class="hero-header">
|
<div class="hero-header">
|
||||||
<div class="hero-title">
|
<div class="hero-title">
|
||||||
<p class="eyebrow">发布执行台</p>
|
<p class="eyebrow">PUBLISH MANAGEMENT</p>
|
||||||
<h2>发布管理</h2>
|
<h2>发布管理</h2>
|
||||||
</div>
|
</div>
|
||||||
<div class="hero-actions">
|
<div class="hero-actions">
|
||||||
|
|||||||
Reference in New Issue
Block a user