@jx3box/jx3box-ui 2.3.25 → 2.3.26

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jx3box/jx3box-ui",
-    "version": "2.3.25",
+    "version": "2.3.26",
     "description": "JX3BOX Vue3 UI",
     "main": "index.js",
     "scripts": {

package/src/header/manage.vue

@@ -16,8 +16,10 @@
             <template v-for="item in userPanel" :key="item.label">
                 <li>
                     <a :href="item.link" :target="item.target || '_self'" class="u-menu-item" @click="onClick(item)">
-                        <img :src="resolveImg(item.icon)" class="u-menu-icon" :alt="item.icon" />
-                        {{ getPanelLabel(item) }}
+                        <span class="u-menu-icon-wrap">
+                            <img :src="resolveImg(item.icon)" class="u-menu-icon" :alt="item.icon" />
+                        </span>
+                        <span class="u-menu-label">{{ getPanelLabel(item) }}</span>
                         <span v-if="showPop && isFeaturePanelItem(item)" class="u-new">New!</span>
                     </a>
                     <a
@@ -26,8 +28,10 @@
                         class="u-menu-item u-menu-item--account-ready"
                         @click.prevent="openAccountReady"
                     >
-                        <img :src="resolveImg(item.icon)" class="u-menu-icon" :alt="item.icon" />
-                        资料完善
+                        <span class="u-menu-icon-wrap">
+                            <img :src="resolveImg(item.icon)" class="u-menu-icon" :alt="item.icon" />
+                        </span>
+                        <span class="u-menu-label">资料完善</span>
                         <span class="u-new u-new--important">重要</span>
                     </a>
                 </li>
@@ -36,8 +40,10 @@
                 <hr v-if="adminPanel.length" />
                 <li v-for="item in adminPanel" :key="item.label">
                     <a :href="item.link" :target="item.target || '_self'" class="u-menu-item">
-                        <img :src="resolveImg(item.icon)" class="u-menu-icon" :alt="item.icon" />
-                        {{ getPanelLabel(item) }}
+                        <span class="u-menu-icon-wrap">
+                            <img :src="resolveImg(item.icon)" class="u-menu-icon" :alt="item.icon" />
+                        </span>
+                        <span class="u-menu-label">{{ getPanelLabel(item) }}</span>
                     </a>
                 </li>
             </template>
@@ -215,29 +221,95 @@ export default {
         align-items: center;
     }
     .u-menu {
+        width: 272px;
+        box-sizing: border-box;
+        right: -10px;
+        top: calc(100% + 8px);
+        margin: 0;
+        padding: 8px;
+        border: 1px solid rgba(31, 35, 41, 0.1);
+        border-radius: 12px;
+        background: rgba(255, 255, 255, 0.98);
+        box-shadow: 0 12px 36px rgba(15, 23, 42, 0.16), 0 2px 8px rgba(15, 23, 42, 0.08);
+        backdrop-filter: blur(12px);
+        -webkit-backdrop-filter: blur(12px);
+
+        &:before {
+            right: 16px;
+            top: -14px;
+            border-width: 7px;
+            border-bottom-color: rgba(31, 35, 41, 0.1);
+        }
+
+        &:after {
+            right: 17px;
+            top: -12px;
+            border-width: 6px;
+            border-bottom-color: #fff;
+        }
+
+        li {
+            margin: 0;
+        }
+
         .u-menu-item {
             .flex;
             align-items: center;
-            gap: 4px;
+            gap: 10px;
+            min-height: 44px;
+            box-sizing: border-box;
+            padding: 8px 10px;
+            border-radius: 8px;
+            color: #303133;
+            font-size: 14px;
+            line-height: 20px;
+            text-decoration: none;
+            transition: background-color 0.16s ease, color 0.16s ease;
 
             &:hover {
-                .u-menu-icon {
-                    filter: invert(100%) sepia(0%) saturate(5658%) hue-rotate(215deg) brightness(114%) contrast(106%);
+                color: #4338ca;
+                background: #f4f3ff;
+
+                .u-menu-icon-wrap {
+                    background: #e8e7ff;
                 }
-                .u-new {
-                    color: #fff;
+
+                .u-menu-icon {
+                    opacity: 0.9;
                 }
             }
         }
+
+        .u-menu-icon-wrap {
+            .flex;
+            align-items: center;
+            justify-content: center;
+            width: 30px;
+            height: 30px;
+            flex: 0 0 30px;
+            border-radius: 8px;
+            background: #f3f4f6;
+            transition: background-color 0.16s ease;
+        }
+
         .u-menu-icon {
-            width: 16px;
-            height: 16px;
+            width: 18px;
+            height: 18px;
+            opacity: 0.72;
+        }
+
+        .u-menu-label {
+            flex: 1;
+            min-width: 0;
+            font-weight: 500;
+            letter-spacing: 0.01em;
         }
     }
 
     hr {
         border: 0;
-        border-top: 1px solid #eee;
+        border-top: 1px solid #eef0f3;
+        margin: 6px 4px;
     }
 
     .u-icon-msg {
@@ -260,19 +332,38 @@ export default {
     }
 
     .u-new {
-        font-size: 12px;
+        flex: 0 0 auto;
+        box-sizing: border-box;
+        min-width: 38px;
         margin-left: 4px;
-        background-color: @v4primary-dark;
-        color: #fff;
-        padding: 0px 6px;
+        padding: 2px 7px;
+        border: 1px solid #d9d6fe;
+        border-radius: 999px;
+        background: #eeedff;
+        color: #4f46e5;
+        font-size: 11px;
+        font-weight: 700;
+        line-height: 16px;
+        text-align: center;
     }
 
     .u-new--important {
-        background-color: #f56c6c;
+        border-color: #ffd1d1;
+        background: #fff0f0;
+        color: #e5484d;
     }
 
     .u-menu-item--account-ready {
-        color: #f56c6c;
+        color: #303133;
+
+        &:hover {
+            color: #d9363e;
+            background: #fff5f5;
+
+            .u-menu-icon-wrap {
+                background: #ffe8e8;
+            }
+        }
     }
 }
 </style>

package/src/stories/layout/ManagePanel.stories.js

@@ -0,0 +1,16 @@
+import ManagePanelStage from "./ManagePanelStage.vue";
+
+export default {
+    title: "Layout/CommonHeader/ManagePanel",
+    component: ManagePanelStage,
+    parameters: {
+        layout: "fullscreen",
+    },
+};
+
+export const Refined = {
+    render: () => ({
+        components: { ManagePanelStage },
+        template: "<ManagePanelStage />",
+    }),
+};

package/src/stories/layout/ManagePanelStage.vue

@@ -0,0 +1,135 @@
+<template>
+    <div class="manage-preview">
+        <div class="manage-preview__header">
+            <div class="manage-preview__brand">JX3BOX</div>
+            <div class="manage-preview__tools">
+                <span class="manage-preview__tool">◯</span>
+                <span class="manage-preview__tool">◇</span>
+                <span class="manage-preview__tool">♢</span>
+                <Manage
+                    ref="manage"
+                    :header-config-loaded="false"
+                    :account-ready-incomplete="true"
+                    :account-ready-issues="['contact']"
+                />
+                <span class="manage-preview__tool">文</span>
+                <span class="manage-preview__avatar">侠</span>
+            </div>
+        </div>
+        <main class="manage-preview__body">
+            <div class="manage-preview__eyebrow">COMMON HEADER</div>
+            <h1>公共头扩展菜单</h1>
+            <p>重新梳理信息密度、状态层级与悬浮反馈后的实际组件预览。</p>
+        </main>
+    </div>
+</template>
+
+<script>
+import Manage from "../../header/manage.vue";
+
+export default {
+    name: "ManagePanelStage",
+    components: { Manage },
+    mounted() {
+        this.$refs.manage.panel = [
+            {
+                key: "featureUpdate",
+                label: "功能更新",
+                link: "javascript:;",
+                icon: "feature.svg",
+                remark: "feature",
+                meta: "storybook-preview",
+            },
+        ];
+        this.$refs.manage.showPop = true;
+    },
+};
+</script>
+
+<style lang="less">
+.manage-preview {
+    min-height: 100vh;
+    background:
+        radial-gradient(circle at 72% 8%, rgba(79, 70, 229, 0.09), transparent 26rem),
+        #f5f7fa;
+}
+
+.manage-preview__header {
+    height: 64px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    box-sizing: border-box;
+    padding: 0 32px;
+    color: #fff;
+    background: #202124;
+    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.2);
+}
+
+.manage-preview__brand {
+    font-size: 14px;
+    font-weight: 800;
+    letter-spacing: 0.12em;
+}
+
+.manage-preview__tools {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.manage-preview__tool {
+    width: 38px;
+    height: 38px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: rgba(255, 255, 255, 0.88);
+    font-size: 19px;
+}
+
+.manage-preview__avatar {
+    width: 34px;
+    height: 34px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-left: 4px;
+    border: 2px solid rgba(255, 255, 255, 0.75);
+    border-radius: 50%;
+    color: #7c2d12;
+    background: #fef3c7;
+    font-size: 13px;
+    font-weight: 700;
+}
+
+.manage-preview .c-header-manage .u-pop-content {
+    visibility: visible;
+    opacity: 1;
+}
+
+.manage-preview__body {
+    padding: 112px 9vw;
+}
+
+.manage-preview__eyebrow {
+    color: #4f46e5;
+    font-size: 12px;
+    font-weight: 800;
+    letter-spacing: 0.14em;
+}
+
+.manage-preview__body h1 {
+    margin: 12px 0 0;
+    color: #111827;
+    font-size: 34px;
+    line-height: 1.2;
+}
+
+.manage-preview__body p {
+    margin: 14px 0 0;
+    color: #6b7280;
+    font-size: 15px;
+}
+</style>