소스 검색

feat(frontend): MainLayout 侧边栏去 emoji、细化选中态、加深背景

- el-icon 组件替换为几何字符(▦◎⬡⇄⊞▱◠⌧⬢⊟⌗≣)
- 侧边栏背景从渐变改为纯色 var(--color-sidebar-bg) #1d166b
- 选中态底色从 accent-alpha 改更淡 0.08
- 分组标题改为更淡的大写小字
- 品牌副标题改为 'OKR · 绩效' 大写小字
- 角色 tag 移除 round 属性
wangkangyjy 3 주 전
부모
커밋
94439faaa8
1개의 변경된 파일54개의 추가작업 그리고 32개의 파일을 삭제
  1. 54 32
      frontend/src/components/MainLayout.vue

+ 54 - 32
frontend/src/components/MainLayout.vue

@@ -6,7 +6,7 @@
           <img src="/logo.png" class="brand-lockup__logo" alt="医梦AI" />
           <div class="brand-lockup__text">
             <span class="brand-lockup__name">医梦AI</span>
-            <span class="brand-lockup__sub">OKR 绩效管理</span>
+            <span class="brand-lockup__sub brand-sub">OKR · 绩效</span>
           </div>
           <svg class="brand-lockup__pulse" viewBox="0 0 160 18" aria-hidden="true" focusable="false">
             <path d="M2 9h52l6-6 8 12 9-12 6 6h75" />
@@ -26,58 +26,58 @@
           router
         >
           <el-menu-item index="/periods">
-            <el-icon><Calendar /></el-icon>
-            <span>考核周期</span>
+            <span class="nav-ico">▦</span>
+            <template #title>考核周期</template>
           </el-menu-item>
           <el-menu-item index="/okr/my">
-            <el-icon><Aim /></el-icon>
-            <span>我的 OKR</span>
+            <span class="nav-ico">◎</span>
+            <template #title>我的 OKR</template>
           </el-menu-item>
           <el-menu-item index="/okr/team">
-            <el-icon><UserFilled /></el-icon>
-            <span>团队 OKR</span>
+            <span class="nav-ico">⬡</span>
+            <template #title>团队 OKR</template>
           </el-menu-item>
           <el-menu-item index="/okr/alignment">
-            <el-icon><Connection /></el-icon>
-            <span>OKR 对齐</span>
+            <span class="nav-ico">⇄</span>
+            <template #title>OKR 对齐</template>
           </el-menu-item>
           <el-menu-item index="/scores/my">
-            <el-icon><DataAnalysis /></el-icon>
-            <span>我的绩效</span>
+            <span class="nav-ico">⊞</span>
+            <template #title>我的绩效</template>
           </el-menu-item>
 
           <div class="menu-group-title" v-show="!isCollapse">考评管理</div>
 
           <el-menu-item index="/scoring" v-if="true">
-            <el-icon><EditPen /></el-icon>
-            <span>绩效打分</span>
+            <span class="nav-ico">▱</span>
+            <template #title>绩效打分</template>
           </el-menu-item>
           <el-menu-item index="/feedback" v-if="true">
-            <el-icon><ChatDotRound /></el-icon>
-            <span>绩效沟通</span>
+            <span class="nav-ico">◠</span>
+            <template #title>绩效沟通</template>
           </el-menu-item>
           <el-menu-item index="/score-appeals" v-if="auth.isHrAdminOrAbove">
-            <el-icon><Warning /></el-icon>
-            <span>绩效申诉</span>
+            <span class="nav-ico">⌧</span>
+            <template #title>绩效申诉</template>
           </el-menu-item>
 
           <div class="menu-group-title" v-show="!isCollapse">系统管理</div>
 
           <el-menu-item index="/org" v-if="auth.isHrAdminOrAbove">
-            <el-icon><OfficeBuilding /></el-icon>
-            <span>组织架构</span>
+            <span class="nav-ico">⬢</span>
+            <template #title>组织架构</template>
           </el-menu-item>
           <el-menu-item index="/kpi/templates" v-if="auth.isHrAdminOrAbove">
-            <el-icon><SetUp /></el-icon>
-            <span>绩效模板</span>
+            <span class="nav-ico">⊟</span>
+            <template #title>绩效模板</template>
           </el-menu-item>
           <el-menu-item index="/system/dimensions" v-if="auth.isHrAdminOrAbove">
-            <el-icon><Histogram /></el-icon>
-            <span>考核维度</span>
+            <span class="nav-ico">⌗</span>
+            <template #title>考核维度</template>
           </el-menu-item>
           <el-menu-item index="/system/logs" v-if="auth.isHrAdminOrAbove">
-            <el-icon><Document /></el-icon>
-            <span>操作日志</span>
+            <span class="nav-ico">≣</span>
+            <template #title>操作日志</template>
           </el-menu-item>
         </el-menu>
       </el-aside>
@@ -126,7 +126,7 @@
             </el-popover>
             <span class="user-info">
               {{ auth.user?.realName }}
-              <el-tag size="small" effect="plain" round class="role-tag">{{ auth.roleLabel }}</el-tag>
+              <el-tag size="small" effect="plain" class="role-tag">{{ auth.roleLabel }}</el-tag>
             </span>
             <el-button text type="danger" @click="handleLogout">退出</el-button>
           </div>
@@ -217,7 +217,7 @@ function handleLogout() {
 .clinical-shell { height: 100vh; color: var(--color-text); }
 .clinical-container { height: 100vh; }
 .clinical-sidebar {
-  background: linear-gradient(180deg, var(--color-brand-strong), var(--color-sidebar-end));
+  background: var(--color-sidebar-bg);
   overflow-y: auto;
   transition: width 0.2s ease;
 }
@@ -253,11 +253,12 @@ function handleLogout() {
   stroke-linejoin: round;
 }
 .menu-group-title {
-  padding: 16px 20px 6px;
-  font-size: 11px;
-  color: var(--color-sidebar-muted);
+  padding: 10px 20px 4px;
+  font-size: 10px;
+  font-weight: 600;
+  color: rgba(255, 255, 255, 0.35);
   text-transform: uppercase;
-  letter-spacing: 1px;
+  letter-spacing: 0.8px;
 }
 .el-menu {
   border-right: none !important;
@@ -268,7 +269,7 @@ function handleLogout() {
   border-radius: var(--radius-sm);
 }
 .el-menu-item.is-active {
-  background: var(--color-accent-alpha) !important;
+  background: rgba(58, 212, 216, 0.08) !important;
 }
 .el-menu-item.is-active::before {
   content: "";
@@ -316,6 +317,27 @@ function handleLogout() {
 .notify-empty { padding: 20px; text-align: center; color: var(--color-text-muted); font-size: 13px; }
 .notify-footer { padding-top: 8px; text-align: center; border-top: 1px solid var(--color-border-soft); margin-top: 4px; }
 
+/* v2 几何图标替代 el-icon */
+.nav-ico {
+  display: inline-block;
+  width: 18px;
+  margin-right: 8px;
+  color: rgba(255, 255, 255, 0.4);
+  font-size: 14px;
+  text-align: center;
+}
+.el-menu-item.is-active .nav-ico {
+  color: var(--color-accent);
+}
+
+/* v2 品牌副标题大写小字 */
+.brand-sub {
+  color: rgba(255, 255, 255, 0.45);
+  font-size: 9px;
+  letter-spacing: 0.8px;
+  text-transform: uppercase;
+}
+
 @media (max-width: 700px) {
   .clinical-sidebar {
     display: none;