refactor(web): 将全局样式迁移为组件级样式并抽取占位组件

2026-08-27 13:51:31 +08:00
parent 7cd0f15135
commit 71fc51f84f
14 changed files with 555 additions and 512 deletions
@@ -94,3 +94,159 @@ function handleLogout() {
    </div>
  </aside>
 </template>
+
+<style scoped>
+.clinical-menu {
+  display: flex;
+  flex: 0 0 var(--sidebar-width);
+  flex-direction: column;
+  width: var(--sidebar-width);
+  color: #c8dde6;
+  background: var(--side);
+}
+
+.menu-brand {
+  display: flex;
+  flex-shrink: 0;
+  gap: 10px;
+  align-items: center;
+  padding: 18px 16px 16px;
+  border-bottom: 1px solid rgb(255 255 255 / 8%);
+}
+
+.menu-brand-icon {
+  display: grid;
+  flex-shrink: 0;
+  width: 34px;
+  height: 34px;
+  place-items: center;
+  border-radius: 9px;
+  background: linear-gradient(135deg, #18a0c0, var(--brand));
+}
+
+.menu-brand-copy strong,
+.menu-brand-copy span {
+  display: block;
+}
+
+.menu-brand-copy strong {
+  color: #fff;
+  font-size: 16px;
+  letter-spacing: 1px;
+}
+
+.menu-brand-copy span {
+  color: #8fb3c2;
+  font-size: 10px;
+  letter-spacing: 1px;
+}
+
+.menu-nav {
+  flex: 1;
+  padding: 12px 10px;
+  overflow-y: auto;
+}
+
+.menu-group-title {
+  padding: 10px 10px 6px;
+  color: #7ba2b3;
+  font-size: 11px;
+  letter-spacing: 1px;
+}
+
+.menu-item {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  margin-bottom: 2px;
+  padding: 10px 12px;
+  color: #c8dde6;
+  font-size: 13.5px;
+  text-decoration: none;
+  border-radius: 8px;
+  transition:
+    color 0.15s ease,
+    background 0.15s ease;
+}
+
+.menu-item:hover {
+  color: #fff;
+  background: rgb(255 255 255 / 7%);
+}
+
+.menu-item.is-active {
+  color: #fff;
+  font-weight: 700;
+  background: var(--brand);
+}
+
+.menu-dot {
+  flex-shrink: 0;
+  width: 6px;
+  height: 6px;
+  background: transparent;
+  border-radius: 50%;
+}
+
+.menu-item.is-active .menu-dot {
+  background: #5ee0a8;
+}
+
+.menu-profile {
+  display: flex;
+  flex-shrink: 0;
+  gap: 10px;
+  align-items: center;
+  padding: 14px 16px;
+  border-top: 1px solid rgb(255 255 255 / 8%);
+}
+
+.menu-profile-avatar {
+  display: grid;
+  flex-shrink: 0;
+  width: 34px;
+  height: 34px;
+  color: #fff;
+  font-size: 14px;
+  font-weight: 700;
+  place-items: center;
+  border-radius: 50%;
+  background: #18a0c0;
+}
+
+.menu-profile-copy {
+  min-width: 0;
+}
+
+.menu-profile-copy strong,
+.menu-profile-copy span {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.menu-profile-copy strong {
+  color: #fff;
+  font-size: 13px;
+}
+
+.menu-profile-copy span {
+  margin-top: 2px;
+  color: #8fb3c2;
+  font-size: 11px;
+}
+
+.menu-logout {
+  flex-shrink: 0;
+  margin-left: auto;
+  padding: 0;
+  color: #8fb3c2;
+  font-size: 11px;
+  background: transparent;
+}
+
+.menu-logout:hover {
+  color: #fff;
+}
+</style>