完成弹窗和but组件

2025-04-26 06:58:49 +08:00 · 2025-04-26 06:58:49 +08:00 · fd361f332c
commit fd361f332c
parent 235ba88620
18 changed files with 1284 additions and 78 deletions
--- a/app.vue
+++ b/app.vue
@ -1,6 +1,7 @@
+<script setup lang="ts">
+</script>
 <template>
-  <NuxtLayout>
-    <NuxtPage />
-  </NuxtLayout>
+    <NuxtLayout>
+        <NuxtPage />
+    </NuxtLayout>
 </template>
-
--- a/assets/css/Ni.css
+++ b/assets/css/Ni.css
@ -0,0 +1,114 @@
+/*宽高比*/
+.a11 {
+    aspect-ratio: 1;
+}
+
+/*全居中*/
+.allCenter {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+/*手指*/
+.point {
+    cursor: pointer;
+}
+
+:root {
+    /*遮罩层背景色*/
+    --Ni-maskLayer-background-color: rgba(0, 0, 0, 0.2);
+    /*圆角边框*/
+    --Ni-border-radius-T0: 1rem;
+    --Ni-border-radius-T1: .5rem;
+    --Ni-border-radius-T2: .35rem;
+    --Ni-border-radius-T3: .2rem;
+    --Ni-border-radius: var(--Ni-border-radius-T3);
+    /*边框阴影*/
+    --Ni-box-shadow: 0 1px 2px -2px rgba(0, 0, 0, .08), 0 3px 6px 0 rgba(0, 0, 0, .06), 0 5px 12px 4px rgba(0, 0, 0, .04);
+    --Ni-white: #fefefe;
+    /*内容背景颜色*/
+    --Ni-content-bg-color: var(--Ni-white);
+    /*内容内边距*/
+    --Ni-content-padding: .5rem .9rem;
+
+    /*主题色*/
+    --Ni-theme-color-T0: #37352f;
+    --Ni-theme-color-T1: #5f5e5b;
+    --Ni-theme-color-T2: #91918e;
+    --Ni-theme-color-T3: #e8e8e7;
+    --Ni-theme-color-T4: #EFEFED;
+    --Ni-theme-color-T0-10: #37352f11;
+    --Ni-theme-color-T0-80: #37352f88;
+    --Ni-theme-color-T0-a0: #37352faa;
+    --Ni-theme-color-T0-c0: #37352fcc;
+    --Ni-theme-color: var(--Ni-theme-color-T0);
+
+
+
+
+
+    /*按钮的颜色*/
+    --Ni-button-border-radius: var(--Ni-border-radius-T3);
+    --Ni-button-height: 2.4rem;
+    --Ni-button-line-height: 2rem;
+    --Ni-button-padding: 0 .8rem;
+    /*禁用加透明*/
+    --Ni-button-disable-opacity: 0.5;/*设置透明度*/
+    --Ni-button-color: #fefefe;
+    /*浅色disable*/
+    --Ni-button-bg-disable-light: #2E333812;
+    /*半透明 default-hover-click*/
+    --Ni-button-bg-halfTransparent-default: rgba(46, 51, 56, 0.05);
+    --Ni-button-bg-halfTransparent-hover: rgba(46, 51, 56, 0.09);
+    --Ni-button-bg-halfTransparent-click: rgba(46, 51, 56, 0.13);
+    /*default*/
+    --Ni-M-A: 1rem;
+    /*tertiary*/
+
+    /*primary*/
+    --Ni-button-primary-bg-default: #5f5e5b;
+    --Ni-button-primary-bg-hover: #91918e;
+    --Ni-button-primary-bg-click: #37352f;
+    /*浅色*/
+    --Ni-button-primary-bg-default-light: #5f5e5b29;/*29-16*/
+    --Ni-button-primary-bg-hover-light: #91918e38;/*38-22*/
+    --Ni-button-primary-bg-click-light: #37352f47;/*47-28*/
+
+    /*info*/
+    --Ni-button-info-bg-default: #2080f0;
+    --Ni-button-info-bg-hover: #4098fc;
+    --Ni-button-info-bg-click: #1060c9;
+    /*浅色*/
+    --Ni-button-info-bg-default-light: rgba(32, 128, 240, 0.16);/*29-16*/
+    --Ni-button-info-bg-hover-light: rgba(32, 128, 240, 0.22);/*38-22*/
+    --Ni-button-info-bg-click-light: rgba(32, 128, 240, 0.28);/*47-28*/
+
+    /*success*/
+    --Ni-button-success-bg-default: #18a058;
+    --Ni-button-success-bg-hover: #36ad6a;
+    --Ni-button-success-bg-click: #0c7a43;
+    /*浅色*/
+    --Ni-button-success-bg-default-light: rgba(24, 160, 88, 0.16);/*29-16*/
+    --Ni-button-success-bg-hover-light: rgba(24, 160, 88, 0.22);/*38-22*/
+    --Ni-button-success-bg-click-light: rgba(24, 160, 88, 0.28);/*47-28*/
+
+    /*warning*/
+    --Ni-button-warning-bg-default: #f0a020;
+    --Ni-button-warning-bg-hover: #fcb040;
+    --Ni-button-warning-bg-click: #c97c10;
+    /*浅色*/
+    --Ni-button-warning-bg-default-light: rgba(240, 160, 32, 0.16);/*29-16*/
+    --Ni-button-warning-bg-hover-light: rgba(240, 160, 32, 0.22);/*38-22*/
+    --Ni-button-warning-bg-click-light: rgba(240, 160, 32, 0.28);/*47-28*/
+
+    /*error*/
+    --Ni-button-error-bg-default: #d03050;
+    --Ni-button-error-bg-hover:#de576d;
+    --Ni-button-error-bg-click: #ab1f3f;
+    /*浅色*/
+    --Ni-button-error-bg-default-light: rgba(208, 48, 80, 0.16);/*29-16*/
+    --Ni-button-error-bg-hover-light: rgba(208, 48, 80, 0.22);/*38-22*/
+    --Ni-button-error-bg-click-light: rgba(208, 48, 80, 0.28);/*47-28*/
+
+}
--- a/assets/css/font.css
+++ b/assets/css/font.css
@ -92,11 +92,4 @@
    U+F900-FAFF,   /* 中日韩兼容表意文字 */
    U+FE30-FE4F,   /* 中日韩兼容形式 */
    U+FF00-FFEF;    /* 半角全角形式 */
-}
-
-:root{
-    /* 应用字体 */
-    html, body{
-        font-family:  'LXGW WenKai', 'Huiwen-mincho', 'nice', 'TechnicLite', 'ChineseFont','EnglishFont', sans-serif;
-    }
 }
--- a/assets/css/style.css
+++ b/assets/css/style.css
@ -5,7 +5,7 @@ html, body {
    margin: 0;
    padding: 0;
    overflow: hidden;
-    font-size: 16px;
+    font-size: 14px;
 }
 a {
    /*去除默认下划线*/
@ -51,3 +51,7 @@ a {
    justify-content: center;
    align-items: center;
 }
+/*手指*/
+.point{
+    cursor: pointer;
+}
--- a/components/Home/Header.vue
+++ b/components/Home/Header.vue
@ -55,7 +55,7 @@ onMounted(() => {
    </header>
 </template>

-<style scoped>
+<style scoped lang="scss">


 /* 手机端 */
@ -64,6 +64,7 @@ onMounted(() => {
        position: relative;
        height: 2.5rem;
        background: var(--header-bg-color);
+        user-select: none;

        div.logoContainer{
            position: relative;
@ -119,6 +120,7 @@ onMounted(() => {
        height: 4rem;
        background: var(--header-bg-color);
        border-bottom: 1px solid var(--bg-color-be);
+        user-select: none;
        & > * {
            position: relative;
            height: 100%;
--- a/components/Home/Menu.vue
+++ b/components/Home/Menu.vue
@ -63,7 +63,7 @@ const activeMenu = computed(() => {
    </div>
 </template>

-<style scoped>
+<style scoped lang="scss">

 /* 手机端 */
@media (max-width: 767px){
@ -124,7 +124,8 @@ const activeMenu = computed(() => {
                    }
                    & > div.menuName{
                        position: relative;
-                        font-size: 1rem;
+                        font-size: 1.2rem;
+                        font-family:  'LXGW WenKai', 'Huiwen-mincho', 'nice', 'TechnicLite', 'ChineseFont','EnglishFont', sans-serif;
                    }
                }
            }
@ -183,7 +184,7 @@ const activeMenu = computed(() => {
                & > div.menuItemContent{
                    position: relative;
                    display: flex;
-                    font-size: 1.1rem;
+                    font-size: 1.3rem;
                    color: var(--color-text);
                    & > div.icon{
                        font-size: inherit;
@ -192,6 +193,7 @@ const activeMenu = computed(() => {
                    }
                    & > div.menuName{
                        position: relative;
+                        font-family:  'LXGW WenKai', 'Huiwen-mincho', 'nice', 'TechnicLite', 'ChineseFont','EnglishFont', sans-serif;
                    }
                    & > div.menuMessage{

--- a/components/Home/PageFramework.vue
+++ b/components/Home/PageFramework.vue
@ -10,7 +10,7 @@
    </div>
 </template>

-<style scoped>
+<style scoped lang="scss">
 div.homePageFramework{
    position: relative;
    width: 100%;
--- a/components/Logo.vue
+++ b/components/Logo.vue
@ -1,5 +1,4 @@
 <script setup lang="ts">
-
 </script>

 <template>
@ -61,7 +60,7 @@
                        box-sizing: border-box;
                        width: 100%;
                        height: 100%;
-                        padding: 0 0.2em;
+                        padding: .1em 0.2em;
                        text-align: center;
                        left: 0;
                        font-size: inherit;
--- a/components/Ni/BaseNotificationContainer.vue
+++ b/components/Ni/BaseNotificationContainer.vue
@ -0,0 +1,14 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+    <div>
+        <slot/>
+        <div id="NiBaseNotificationContainer"></div>
+    </div>
+</template>
+
+<style scoped>
+
+</style>
--- a/components/Ni/Button.vue
+++ b/components/Ni/Button.vue
@ -0,0 +1,243 @@
+<script setup lang="ts">
+const props = defineProps({
+    type: {
+        // 按钮类型
+        type: String,
+        default: 'default',
+        validator: (value: string) => ['default', 'tertiary', 'primary', 'info', 'success', 'warning', 'error'].includes(value)
+    },
+    strong: {
+        // 加粗
+        type: Boolean,
+        default: false,
+    },
+    grade: {
+        // 重要等级
+        type: String,
+        default: 'default', // 深色，浅色，半透明，全透明，虚线
+        validator: (value: string) => ['default', 'light', 'halfTransparent', 'transparent', 'dotted'].includes(value)
+    },
+    angle: {
+        // 圆角程度
+        type: String,
+        default: 'default', // 正常角，圆角，圆形
+        validator: (value: string) => ['default', 'round', 'circle'].includes(value)
+    },
+    loading: {
+        // 加载中
+        type: Boolean,
+        default: false,
+    },
+    disabled: {
+        // 禁用
+        type: Boolean,
+        default: false,
+    }
+})
+consola.info(toValue(props))
+const typeS = ref(props.type);
+const strong = ref(props.strong);
+const grade = ref(props.grade);
+const angle = ref(props.angle);
+const loading = ref(props.loading);
+const disabled = ref(props.disabled);
+watchEffect(() => {
+    typeS.value = props.type;
+    strong.value = props.strong;
+    grade.value = props.grade;
+    angle.value = props.angle;
+    loading.value = props.loading;
+    disabled.value = props.disabled;
+})
+const NiButtonClass = computed(() => {
+    return ['angle-' + angle.value ,
+        disabled.value ? 'disabled' : '',
+        strong.value ? 'strong' : '',
+        grade.value == 'dotted' ? 'dotted' : '',
+        grade.value == 'light' ? 'light' : '',
+        grade.value == 'halfTransparent' ? 'halfTransparent' : '',
+        grade.value == 'transparent' ? 'transparent' : '',
+    ].join(' ');
+})
+const style = computed(() => {
+    let data;
+    function makeTypeData(type: string) {
+        return {
+            '--NiButton-bg-default': `var(--Ni-button-${type}-bg-default)`,
+            '--NiButton-bg-hover': `var(--Ni-button-${type}-bg-hover)`,
+            '--NiButton-bg-click': `var(--Ni-button-${type}-bg-click)`,
+            '--NiButton-color-default': `var(--Ni-button-color)`,
+            '--NiButton-color-hover': `var(--Ni-button-color)`,
+            '--NiButton-color-click': `var(--Ni-button-color)`,
+        }
+    }
+    data = makeTypeData(typeS.value)
+    if(grade.value == 'light'){
+        data = {
+            '--NiButton-bg-default': `var(--Ni-button-${typeS.value}-bg-default-light)`,
+            '--NiButton-bg-hover': `var(--Ni-button-${typeS.value}-bg-hover-light)`,
+            '--NiButton-bg-click': `var(--Ni-button-${typeS.value}-bg-click-light)`,
+            '--NiButton-color-default': `var(--Ni-button-${typeS.value}-bg-default)`,
+            '--NiButton-color-hover': `var(--Ni-button-${typeS.value}-bg-default)`,
+            '--NiButton-color-click':  `var(--Ni-button-${typeS.value}-bg-default)`,
+        }
+    }
+    return data;
+})
+</script>
+
+<template>
+    <div class="NiButton"
+         :style
+         :class="NiButtonClass"
+    >
+        <slot name="icons"/>
+        <span v-if="loading"  class="sxIconFont" :class="loading && 'loading'">&#xe687;</span>
+        <slot v-if="!(loading && angle == 'circle')"/>
+    </div>
+</template>
+
+<style scoped lang="scss">
+.NiButton{
+    // ===背景
+    // 默认背景色
+    --NiButton-bg-default: var('');
+    // hover色
+    --NiButton-bg-hover: var('');
+    // 点击色
+    --NiButton-bg-click: var('');
+    // ===文字
+    // 默认背景色
+    --NiButton-color-default: var('');
+    // hover色
+    --NiButton-color-hover: var('');
+    // 点击色
+    --NiButton-color-click: var('');
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    background-color: var(--NiButton-bg-default);
+    color: var(--NiButton-color-default);
+    padding: var(--Ni-button-padding);
+    width: fit-content;
+    height: var(--Ni-button-height);
+    border: 1px solid var(--NiButton-bg-default);
+    cursor: pointer;
+    transition: color .3s ease-in-out, background-color .3s ease-in-out, border-color .3s ease-in-out, width .3s ease-in-out;
+    //height: var(--Ni-button-height);
+    box-sizing: border-box;
+    user-select: none;
+    font-weight: 400;
+    &:hover {
+        background-color: var(--NiButton-bg-hover);
+        color: var(--NiButton-color-hover);
+        border: 1px solid var(--NiButton-bg-hover);
+    }
+    &:active {
+        background-color: var(--NiButton-bg-click);
+        color: var(--NiButton-color-click);
+        border: 1px solid var(--NiButton-bg-click);
+    }
+}
+.NiButton.disabled{
+    opacity: var(--Ni-button-disable-opacity);
+    cursor: not-allowed;
+    &:hover {
+        background-color: var(--NiButton-bg-default);
+        color: var(--NiButton-color-default);
+        border: 1px solid var(--NiButton-bg-default);
+    }
+    &:active {
+        background-color: var(--NiButton-bg-default);
+        color: var(--NiButton-color-default);
+        border: 1px solid var(--NiButton-bg-default);
+    }
+}
+.NiButton.angle-default{
+    border-radius: var(--Ni-button-border-radius);
+}
+.NiButton.angle-round{
+    border-radius: var(--Ni-button-height);
+    height: var(--Ni-button-height);
+}
+.NiButton.angle-circle{
+    border-radius: 100%;
+    padding: .2rem;
+    aspect-ratio: 1;
+    width: var(--Ni-button-height);
+    height: var(--Ni-button-height);
+    justify-content: center;
+}
+.NiButton.strong{
+    font-weight: bold;
+}
+.NiButton.angle-circle > .loading{
+    margin-right: 0;
+}
+.loading{
+    position: relative;
+    font-size: 1.2em;
+    margin-right: 5px;
+    animation: opacityUp .3s linear forwards, spinX 1.5s infinite linear ;
+}
+// 浅色
+.NiButton.light{
+    //border-color: var(--NiButton-bg-default);
+    border: 1px solid transparent;
+}
+// 半透明
+.NiButton.halfTransparent{
+    background-color: var(--Ni-button-bg-halfTransparent-default);
+    color: var(--NiButton-bg-default);
+    border: 1px solid transparent;
+    &:hover {
+        background-color: var(--Ni-button-bg-halfTransparent-hover);
+        color: var(--NiButton-bg-default);
+        border: 1px solid transparent;
+    }
+    &:active {
+        background-color: var(--Ni-button-bg-halfTransparent-click);
+        color: var(--NiButton-bg-default);
+        border: 1px solid transparent;
+    }
+}
+// 半透明
+.NiButton.transparent{
+    background-color: rgba(0,0,0,0);
+    color: var(--NiButton-bg-default);
+    border: 1px solid transparent;
+    &:hover {
+        background-color: var(--Ni-button-bg-halfTransparent-hover);
+        color: var(--NiButton-bg-default);
+        border: 1px solid transparent;
+    }
+    &:active {
+        background-color: var(--Ni-button-bg-halfTransparent-click);
+        color: var(--NiButton-bg-default);
+        border: 1px solid transparent;
+    }
+}
+// 虚线
+.NiButton.dotted{
+    border: 1px dashed var(--NiButton-bg-default);
+    background-color: transparent;
+    color: var(--NiButton-bg-default);
+    &:active {
+        color: var(--NiButton-bg-click);
+        border: 1px dashed var(--NiButton-bg-click);
+    }
+}
+//旋转
+@keyframes spinX {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(-360deg); }
+}
+@keyframes opacityUp {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+</style>
--- a/components/Ni/Logo.vue
+++ b/components/Ni/Logo.vue
@ -0,0 +1,95 @@
+<script setup lang="ts">
+</script>
+
+<template>
+    <div class="logoContainer">
+        <div class="logoContent">
+            <div class="logoLine1">
+                <span>星</span><span>撰 <div class="myMask"></div></span>
+            </div>
+            <div class="logoLine2">star writ</div>
+        </div>
+    </div>
+</template>
+
+<style scoped lang="scss">
+//@media (max-width: 767px) {
+//    .logoContainer {
+//        font-size: 10px;
+//    }
+//}
+.logoContainer{
+    user-select: none !important;
+    position: relative;
+    height: 100%;
+    width: auto;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-bottom: 2px solid var(--Ni-theme-color);
+    .logoContent{
+        position: relative;
+        padding:0;
+        & > div{
+            position: relative;
+        }
+        & > div.logoLine1{
+            font-size: 1.5em;
+            text-align: center;
+            font-family: KingHwa_OldSong, sans-serif;
+            & > span{
+                position: relative;
+                padding: 0.2em;
+            }
+            & > span:last-child{
+                & > div.myMask {
+                    position: absolute;
+                    overflow: hidden;
+                    box-sizing: border-box;
+                    width: 0;
+                    height: 100%;
+                    top: 0;
+                    left: 0;
+                    font-size: inherit;
+                    background: #000;
+                    animation: ChangeWidth 500ms ease-in-out 300ms forwards;
+
+                    &:last-child::after {
+                        content: '撰';
+                        color: #fff;
+                        position: absolute;
+                        overflow: hidden;
+                        box-sizing: border-box;
+                        width: 100%;
+                        height: 100%;
+                        padding: .1em 0.2em;
+                        text-align: center;
+                        left: 0;
+                        font-size: inherit;
+                        background: transparent;
+                    }
+                }
+            }
+        }
+        & > div.logoLine2{
+            height: 40%;
+            width: 100%;
+            font-size: 100%;
+            line-height: 1em;
+            letter-spacing: 0.1em;
+            text-align: center; /* 两端对齐 */
+            white-space: nowrap; /* 禁止换行 */
+            overflow: hidden; /* 隐藏超出部分 */
+            font-family: "LXGW WenKai", sans-serif;
+        }
+    }
+}
+@keyframes ChangeWidth {
+    from {
+        width: 0;
+    }
+    to {
+        width: 100%;
+    }
+}
+</style>
--- a/components/Ni/Popup.vue
+++ b/components/Ni/Popup.vue
@ -0,0 +1,241 @@
+<script setup lang="ts">
+// Ni组件消息基础弹窗容器
+const props = defineProps({
+    status: {
+        type: Boolean,
+        default: false
+    },
+    maskClosable: {
+        // 点击遮罩层是否能够关闭，默认可以关闭
+        type: Boolean,
+        default: true
+    },
+    escKeyClosable: {
+        // 按下Esc层是否能够关闭，默认可以关闭
+        type: Boolean,
+        default: true
+    },
+    width:{
+        // 宽度
+        type: String,
+        default: '600'
+    }
+})
+// 弹窗本身
+const NiPopup = ref(null)
+const NiPopupContainer = ref(null)
+// 开/关状态
+const visible = ref(props.status)
+// 主体宽度
+const width = ref(props.width)
+// 监听弹窗状态值
+watch(() => props.status, (val) => {
+    visible.value = val;
+})
+// 监听弹窗主体宽度
+watch(() => props.width, (val) => {
+    width.value = val;
+    setPopupWitdh(val);
+})
+// 定义触发父组件事件  其中update需要 v-module:status="popupStatus" || v-module="status" || :status + @update=status
+const emit = defineEmits(['update:status', 'handleClose'])
+// 聚焦指令
+const vFocus = {
+    // 单独设置没用，需要在标签中设置 tabindex="0"
+    mounted: (el) => {
+        el.focus()
+    }
+}
+function setPopupWitdh(val: string) {
+    if(parseInt(val)){
+        nextTick(() => {
+            NiPopupContainer.value?.style.setProperty('--width', `${val}px`)
+        })
+    }else{
+        throw new Error('弹窗宽度需要正确的数字!')
+    }
+}
+// 关闭弹窗
+const handleClose = () => {
+    emit('update:status', false)
+    emit('handleClose')
+}
+// Esc关闭
+const handleEscClose = () => {
+    if(props.escKeyClosable){
+        handleClose()
+    }
+}
+// 遮罩层关闭
+const handleMaskClickClose = () => {
+    if(props.maskClosable){
+        handleClose()
+    }
+}
+
+onMounted(() => {
+    setPopupWitdh(width.value)
+})
+</script>
+
+<template>
+    <teleport to="#teleports">
+        <Transition name="NiPopup">
+            <div
+                v-if="visible"
+                ref="NiPopup"
+                v-focus
+                tabindex="0"
+                class="NiPopup allCenter"
+                @keydown.esc="handleEscClose"
+                @click.self="handleMaskClickClose"
+                >
+                <div ref="NiPopupContainer" :style="{ '--width': width + 'px' }" class="NiPopupContainer">
+                    <header>
+                        <div class="logo"><NiLogo/></div>
+                        <div class="title"><slot name="title">标题</slot></div>
+                        <div class="closeBar"></div>
+                    </header>
+                    <div class="headerLine"></div>
+                    <main>
+                        <div>
+                            <slot name="default"/>
+                        </div>
+                    </main>
+                    <footer>
+                        <div class="button">
+                            <div><slot name="footer"/></div>
+                        </div>
+                    </footer>
+                </div>
+            </div>
+        </Transition>
+    </teleport>
+</template>
+
+<style scoped lang="scss">
+.NiPopup-enter-active, .NiPopup-leave-active, .NiPopup-enter-active .NiPopupContainer, .NiPopup-leave-active .NiPopupContainer{
+    transition: all .3s;
+}
+.NiPopup-enter-from, .NiPopup-leave-to {
+    opacity: 0;
+    background: rgba(0, 0, 0, 0);
+}
+.NiPopup-enter-from .NiPopupContainer, .NiPopup-leave-to .NiPopupContainer{
+    transform: scale(0);
+}
+.NiPopup {
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 100vw;
+    height: 100vh;
+    background: rgba(0, 0, 0, 0.2);
+}
+
+// 弹窗主体
+.NiPopupContainer {
+    position: relative;
+    will-change: transform; /* 提前告知浏览器会变化的属性 will-change: transform, opacity; 优化性能*/
+    --width: 600px;
+    aspect-ratio: 1/0.618;
+    max-width: 80vw;
+    max-height: 80vh;
+    width: var(--width);
+    border-radius: var(--Ni-border-radius);
+    box-shadow: var(--Ni-box-shadow);
+    border: none;
+    transform-origin: center; /* 设置缩放中心点 */
+    background-color: var(--Ni-content-bg-color);
+    display: flex;
+    flex-direction: column;
+}
+// 弹窗头
+.NiPopupContainer>header{
+    position: relative;
+    height: 2rem;
+    padding: var(--Ni-content-padding);
+    display: flex;
+
+    & > div.logo{
+        position: relative;
+        font-size: 0.4rem;
+        display: flex;
+        align-items: center;
+        height: 100%;
+        bottom: -0.15rem;
+        & > div{
+            height: auto;
+        }
+    }
+
+    @media (max-width: 767px) {
+        & > div.logo{
+            font-size: 6px !important;
+        }
+    }
+
+    & > div.title{
+        position: relative;
+        height: 100%;
+        padding-left: .7rem;
+        display: flex;
+        align-items: center;
+        user-select: none;
+        color: var(--Ni-theme-color);
+        margin-left: .7rem;
+
+        &:before{
+            content: ' ';
+            position: absolute;
+            width: 1px;
+            height: 30%;
+            top: 42%;
+            left: 0;
+            background-color: var(--Ni-theme-color-T1);
+        }
+    }
+}
+// 弹窗内容头分割线
+.NiPopupContainer>div.headerLine{
+    height: 3px;
+    width: 100%;
+    background-color: var(--Ni-theme-color-T0-10);
+}
+// 弹窗内容
+.NiPopupContainer > main{
+    position: relative;
+    flex: 1;
+    padding: var(--Ni-content-padding);
+    overflow: hidden;
+    & > div{
+        position: relative;
+        height: 100%;
+        overflow-y: auto;
+    }
+}
+
+// 弹窗页脚
+.NiPopupContainer > footer{
+    position: relative;
+    padding: var(--Ni-content-padding);
+    min-height: 2rem;
+    display: flex;
+
+    & > div.button{
+        position: relative;
+        flex: 1;
+        display: flex;
+        flex-direction: row-reverse;
+    }
+
+}
+
+/* 不用了*/
+.NiPopupContainer.onLeave{
+    animation: scaleUp 0.5s ease-in-out;
+    animation-fill-mode: forwards; /* 保持动画结束状态 */
+    animation-direction: reverse;/* 反向播放时 */
+}
+
+</style>
--- a/components/ResizeContent.vue
+++ b/components/ResizeContent.vue
@ -100,7 +100,6 @@ onBeforeUnmount(() => {
 .dargContainer{
    position: absolute;
    width: 6px;
-    //background: red;
    height: calc(100% - 10px);
    right: 0;
    top: 0;
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@ -8,7 +8,7 @@ import type {AddressInfo} from "node:net";
 export default defineNuxtConfig({
  compatibilityDate: '2024-11-01',
  devtools: { enabled: true },
-  modules: ['@nuxt/eslint', /*'@nuxtjs/tailwindcss'*/],
+  modules: ['@nuxt/eslint'],
  devServer: {
    host: '0.0.0.0',
    port: 3000,
@ -22,6 +22,7 @@ export default defineNuxtConfig({
    '~/assets/css/value.css',
    '~/assets/css/iconfont.css',
    '~/assets/css/transitions.css',
+    '~/assets/css/Ni.css',
  ],
  app:{
    head:{
@ -143,4 +144,4 @@ async function startBroswer(address: AddressInfo | string | null) {
      process.env.START = String(true)
    }
  }
-}
+}
--- a/package-lock.json
+++ b/package-lock.json
@ -17,7 +17,8 @@
        "nuxt": "^3.16.2",
        "redis": "^4.7.0",
        "vue": "^3.5.13",
-        "vue-router": "^4.5.0"
+        "vue-router": "^4.5.0",
+        "vueuc": "^0.4.64"
      },
      "devDependencies": {
        "@nuxtjs/tailwindcss": "^6.13.2",
@ -543,6 +544,15 @@
        "node": ">=0.1.90"
      }
    },
+    "node_modules/@css-render/vue3-ssr": {
+      "version": "0.15.14",
+      "resolved": "https://registry.npmjs.org/@css-render/vue3-ssr/-/vue3-ssr-0.15.14.tgz",
+      "integrity": "sha512-//8027GSbxE9n3QlD73xFY6z4ZbHbvrOVB7AO6hsmrEzGbg+h2A09HboUyDgu+xsmj7JnvJD39Irt+2D0+iV8g==",
+      "license": "MIT",
+      "peerDependencies": {
+        "vue": "^3.0.11"
+      }
+    },
    "node_modules/@csstools/selector-resolve-nested": {
      "version": "3.0.0",
      "resolved": "https://registry.npmmirror.com/@csstools/selector-resolve-nested/-/selector-resolve-nested-3.0.0.tgz",
@ -651,6 +661,12 @@
        "tslib": "^2.4.0"
      }
    },
+    "node_modules/@emotion/hash": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
+      "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==",
+      "license": "MIT"
+    },
    "node_modules/@es-joy/jsdoccomment": {
      "version": "0.49.0",
      "resolved": "https://registry.npmmirror.com/@es-joy/jsdoccomment/-/jsdoccomment-0.49.0.tgz",
@ -1985,6 +2001,12 @@
      "integrity": "sha512-4JQNk+3mVzK3xh2rqd6RB4J46qUR19azEHBneZyTZM+c456qOrbbM/5xcR8huNCCcbVt7+UmizG6GuUvPvKUYg==",
      "license": "MIT"
    },
+    "node_modules/@juggle/resize-observer": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@juggle/resize-observer/-/resize-observer-3.4.0.tgz",
+      "integrity": "sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==",
+      "license": "Apache-2.0"
+    },
    "node_modules/@koa/router": {
      "version": "12.0.2",
      "resolved": "https://registry.npmmirror.com/@koa/router/-/router-12.0.2.tgz",
@ -7085,6 +7107,22 @@
        "postcss": "^8.0.9"
      }
    },
+    "node_modules/css-render": {
+      "version": "0.15.14",
+      "resolved": "https://registry.npmjs.org/css-render/-/css-render-0.15.14.tgz",
+      "integrity": "sha512-9nF4PdUle+5ta4W5SyZdLCCmFd37uVimSjg1evcTqKJCyvCEEj12WKzOSBNak6r4im4J4iYXKH1OWpUV5LBYFg==",
+      "license": "MIT",
+      "dependencies": {
+        "@emotion/hash": "~0.8.0",
+        "csstype": "~3.0.5"
+      }
+    },
+    "node_modules/css-render/node_modules/csstype": {
+      "version": "3.0.11",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.11.tgz",
+      "integrity": "sha512-sa6P2wJ+CAbgyy4KFssIb/JNMLxFvKF1pCYCSXS8ZMuqZnMsrxqI2E5sPyoTpxoPU/gVZMzr2zjOfg8GIZOMsw==",
+      "license": "MIT"
+    },
    "node_modules/css-select": {
      "version": "5.1.0",
      "resolved": "https://registry.npmmirror.com/css-select/-/css-select-5.1.0.tgz",
@ -8783,6 +8821,12 @@
        "node": ">=0.8.x"
      }
    },
+    "node_modules/evtd": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/evtd/-/evtd-0.2.4.tgz",
+      "integrity": "sha512-qaeGN5bx63s/AXgQo8gj6fBkxge+OoLddLniox5qtLAEY5HSnuSlISXVPxnSae1dWblvTh4/HoMIB+mbMsvZzw==",
+      "license": "MIT"
+    },
    "node_modules/execa": {
      "version": "8.0.1",
      "resolved": "https://registry.npmmirror.com/execa/-/execa-8.0.1.tgz",
@ -10766,6 +10810,257 @@
        "node": ">= 0.8.0"
      }
    },
+    "node_modules/lightningcss": {
+      "version": "1.29.2",
+      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.29.2.tgz",
+      "integrity": "sha512-6b6gd/RUXKaw5keVdSEtqFVdzWnU5jMxTUjA2bVcMNPLwSQ08Sv/UodBVtETLCn7k4S1Ibxwh7k68IwLZPgKaA==",
+      "license": "MPL-2.0",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "detect-libc": "^2.0.3"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "lightningcss-darwin-arm64": "1.29.2",
+        "lightningcss-darwin-x64": "1.29.2",
+        "lightningcss-freebsd-x64": "1.29.2",
+        "lightningcss-linux-arm-gnueabihf": "1.29.2",
+        "lightningcss-linux-arm64-gnu": "1.29.2",
+        "lightningcss-linux-arm64-musl": "1.29.2",
+        "lightningcss-linux-x64-gnu": "1.29.2",
+        "lightningcss-linux-x64-musl": "1.29.2",
+        "lightningcss-win32-arm64-msvc": "1.29.2",
+        "lightningcss-win32-x64-msvc": "1.29.2"
+      }
+    },
+    "node_modules/lightningcss-darwin-arm64": {
+      "version": "1.29.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.29.2.tgz",
+      "integrity": "sha512-cK/eMabSViKn/PG8U/a7aCorpeKLMlK0bQeNHmdb7qUnBkNPnL+oV5DjJUo0kqWsJUapZsM4jCfYItbqBDvlcA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-x64": {
+      "version": "1.29.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.29.2.tgz",
+      "integrity": "sha512-j5qYxamyQw4kDXX5hnnCKMf3mLlHvG44f24Qyi2965/Ycz829MYqjrVg2H8BidybHBp9kom4D7DR5VqCKDXS0w==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-freebsd-x64": {
+      "version": "1.29.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.29.2.tgz",
+      "integrity": "sha512-wDk7M2tM78Ii8ek9YjnY8MjV5f5JN2qNVO+/0BAGZRvXKtQrBC4/cn4ssQIpKIPP44YXw6gFdpUF+Ps+RGsCwg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm-gnueabihf": {
+      "version": "1.29.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.29.2.tgz",
+      "integrity": "sha512-IRUrOrAF2Z+KExdExe3Rz7NSTuuJ2HvCGlMKoquK5pjvo2JY4Rybr+NrKnq0U0hZnx5AnGsuFHjGnNT14w26sg==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-gnu": {
+      "version": "1.29.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.29.2.tgz",
+      "integrity": "sha512-KKCpOlmhdjvUTX/mBuaKemp0oeDIBBLFiU5Fnqxh1/DZ4JPZi4evEH7TKoSBFOSOV3J7iEmmBaw/8dpiUvRKlQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-musl": {
+      "version": "1.29.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.29.2.tgz",
+      "integrity": "sha512-Q64eM1bPlOOUgxFmoPUefqzY1yV3ctFPE6d/Vt7WzLW4rKTv7MyYNky+FWxRpLkNASTnKQUaiMJ87zNODIrrKQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-gnu": {
+      "version": "1.29.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.29.2.tgz",
+      "integrity": "sha512-0v6idDCPG6epLXtBH/RPkHvYx74CVziHo6TMYga8O2EiQApnUPZsbR9nFNrg2cgBzk1AYqEd95TlrsL7nYABQg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-musl": {
+      "version": "1.29.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.29.2.tgz",
+      "integrity": "sha512-rMpz2yawkgGT8RULc5S4WiZopVMOFWjiItBT7aSfDX4NQav6M44rhn5hjtkKzB+wMTRlLLqxkeYEtQ3dd9696w==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-arm64-msvc": {
+      "version": "1.29.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.29.2.tgz",
+      "integrity": "sha512-nL7zRW6evGQqYVu/bKGK+zShyz8OVzsCotFgc7judbt6wnB2KbiKKJwBE4SGoDBQ1O94RjW4asrCjQL4i8Fhbw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-x64-msvc": {
+      "version": "1.29.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.29.2.tgz",
+      "integrity": "sha512-EdIUW3B2vLuHmv7urfzMI/h2fmlnOQBk1xlsDxkN1tCWKjNFjfLhGxYk8C8mzpSfr+A6jFFIi8fU6LbQGsRWjA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss/node_modules/detect-libc": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.4.tgz",
+      "integrity": "sha512-3UDv+G9CsCKO1WKMGw9fwq/SWJYbI0c5Y7LU1AXYoDdbhE2AHQ6N6Nb34sG8Fj7T5APy8qXDCKuuIHd1BR0tVA==",
+      "license": "Apache-2.0",
+      "optional": true,
+      "peer": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
    "node_modules/lilconfig": {
      "version": "3.1.3",
      "resolved": "https://registry.npmmirror.com/lilconfig/-/lilconfig-3.1.3.tgz",
@ -14073,6 +14368,12 @@
      "integrity": "sha512-6FtHJEvt+pVMIB9IBY+IcCJ6Z5f1iQnytgyfKMhDKgmzYG+TeH/wx1y3l27rshSbLiSanrR9ffZDrEsmjlQF2g==",
      "license": "MIT"
    },
+    "node_modules/seemly": {
+      "version": "0.3.10",
+      "resolved": "https://registry.npmjs.org/seemly/-/seemly-0.3.10.tgz",
+      "integrity": "sha512-2+SMxtG1PcsL0uyhkumlOU6Qo9TAQ/WyH7tthnPIOQB05/12jz9naq6GZ6iZ6ApVsO3rr2gsnTf3++OV63kE1Q==",
+      "license": "MIT"
+    },
    "node_modules/semver": {
      "version": "7.7.1",
      "resolved": "https://registry.npmmirror.com/semver/-/semver-7.7.1.tgz",
@ -15934,6 +16235,18 @@
        "node": ">= 0.8"
      }
    },
+    "node_modules/vdirs": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmjs.org/vdirs/-/vdirs-0.1.8.tgz",
+      "integrity": "sha512-H9V1zGRLQZg9b+GdMk8MXDN2Lva0zx72MPahDKc30v+DtwKjfyOSXWRIX4t2mhDubM1H09gPhWeth/BJWPHGUw==",
+      "license": "MIT",
+      "dependencies": {
+        "evtd": "^0.2.2"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.11"
+      }
+    },
    "node_modules/vite": {
      "version": "6.3.2",
      "resolved": "https://registry.npmmirror.com/vite/-/vite-6.3.2.tgz",
@ -16198,6 +16511,18 @@
        "vue": "^3.5.0"
      }
    },
+    "node_modules/vooks": {
+      "version": "0.2.12",
+      "resolved": "https://registry.npmjs.org/vooks/-/vooks-0.2.12.tgz",
+      "integrity": "sha512-iox0I3RZzxtKlcgYaStQYKEzWWGAduMmq+jS7OrNdQo1FgGfPMubGL3uGHOU9n97NIvfFDBGnpSvkWyb/NSn/Q==",
+      "license": "MIT",
+      "dependencies": {
+        "evtd": "^0.2.2"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
    "node_modules/vscode-uri": {
      "version": "3.1.0",
      "resolved": "https://registry.npmmirror.com/vscode-uri/-/vscode-uri-3.1.0.tgz",
@ -16291,6 +16616,24 @@
        "vue": "^3.2.0"
      }
    },
+    "node_modules/vueuc": {
+      "version": "0.4.64",
+      "resolved": "https://registry.npmjs.org/vueuc/-/vueuc-0.4.64.tgz",
+      "integrity": "sha512-wlJQj7fIwKK2pOEoOq4Aro8JdPOGpX8aWQhV8YkTW9OgWD2uj2O8ANzvSsIGjx7LTOc7QbS7sXdxHi6XvRnHPA==",
+      "license": "MIT",
+      "dependencies": {
+        "@css-render/vue3-ssr": "^0.15.10",
+        "@juggle/resize-observer": "^3.3.1",
+        "css-render": "^0.15.10",
+        "evtd": "^0.2.4",
+        "seemly": "^0.3.6",
+        "vdirs": "^0.1.4",
+        "vooks": "^0.2.4"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.11"
+      }
+    },
    "node_modules/web-streams-polyfill": {
      "version": "3.3.3",
      "resolved": "https://registry.npmmirror.com/web-streams-polyfill/-/web-streams-polyfill-3.3.3.tgz",
--- a/package.json
+++ b/package.json
@ -24,7 +24,8 @@
    "nuxt": "^3.16.2",
    "redis": "^4.7.0",
    "vue": "^3.5.13",
-    "vue-router": "^4.5.0"
+    "vue-router": "^4.5.0",
+    "vueuc": "^0.4.64"
  },
  "devDependencies": {
    "@nuxtjs/tailwindcss": "^6.13.2",
--- a/pages/home/blog/index.vue
+++ b/pages/home/blog/index.vue
@ -6,7 +6,13 @@ definePageMeta({
        mode: 'out-in',
    },
 })
+// 菜单数据
 const menuList = ref([]);
+// 菜单折叠
+const menuCollapseStatus = ref(true)
+// blog信息弹窗状态
+const blogInfoPopupStatus = ref(false)
+const blogInfoPopupStatus2 = ref(false)

 const getMenuListFetch = async () => {
    const { data, pending, error } = await useFetch('/api/blog/blogMenu');
@ -15,7 +21,18 @@ const getMenuListFetch = async () => {
    }
    menuList.value = data.value?.filter(i => i.pid === '0')
 }
+const sendMessage = async () => {
+    // nMessage.success('??')
+}
+const handleCloseBefore = (s) => {
+    consola.info('要关闭啦', s)
+}

+const loading = ref(false)
+
+setTimeout(() => {
+    loading.value = true
+}, 5000)

 // SSR运行
 await getMenuListFetch()
@ -27,28 +44,129 @@ onMounted(() => {

 <template>
    <div class="homeBlog">
-        <ResizeContent class="left">
+        <ResizeContent class="left" :class="!menuCollapseStatus && 'menuCollapse'">
            <div class="blogMenuContainer">
                <header class="contentBox">
                    <div class="title">博客目录</div>
-                    <div class="bar star-blogIconFont awaitShow">&#xe67f;</div>
+                    <div class="bar add star-blogIconFont awaitShow a11 allCenter">&#xe608;</div>
+                    <div class="bar star-blogIconFont awaitShow a11 allCenter" @click="menuCollapseStatus = !menuCollapseStatus">&#xe67f;</div>
                </header>
                <div class="line"/>
                <div class="blogMenuContent">
                    <div class="contentBox blogMenuItem" v-for="(item, index) in menuList" :key="item.id">
-                        <div class="addIcon star-blogIconFont  a11 allCenter hoverBar">&#xe608;</div>
+                        <div class="addIcon star-blogIconFont  a11 allCenter">&#xe608;</div>
                        <div class="text oneLineOverMore">{{item.name}}</div>
-                        <div class="bar" :class="item.pid === '0' && 'awaistShows'">
-                            <div class="star-blogIconFont a11 allCenter hoverBar">&#xe73a;</div>
-                            <div class="star-blogIconFont a11 allCenter hoverBar">&#xe608;</div>
+                        <div class="barBox" :class="item.pid === '0' && 'awaistShows'">
+                            <div class="star-blogIconFont bar a11 allCenter">&#xe608;</div>
+                            <div class="star-blogIconFont bar a11 allCenter">&#xe73a;</div>
                        </div>
                    </div>
                </div>
                <footer></footer>
            </div>
        </ResizeContent>
-        <div class="main"></div>
+        <div class="main">
+            <header>
+                <div class="menuCollapse a11 allCenter point" :class="menuCollapseStatus && 'hide'">
+                    <div class="star-blogIconFont" @click="menuCollapseStatus = !menuCollapseStatus">&#xe67f;</div>
+                </div>
+            </header>
+            <main>
+                <div @click="blogInfoPopupStatus = !blogInfoPopupStatus">点击</div>
+                <div>默认</div>
+                <div>
+                    <NiButton>默认按钮</NiButton>
+                    <NiButton type="tertiary">tertiary按钮</NiButton>
+                    <NiButton loading type="primary">primary按钮</NiButton>
+                    <NiButton strong type="info">info按钮</NiButton>
+                    <NiButton loading type="success">success按钮</NiButton>
+                    <NiButton type="warning">warning按钮</NiButton>
+                    <NiButton type="error">error按钮</NiButton>
+                </div>
+                <div>grade 虚线边框</div>
+                <div>
+                    <NiButton>默认按钮</NiButton>
+                    <NiButton grade="dotted" type="tertiary">tertiary按钮</NiButton>
+                    <NiButton grade="dotted" loading type="primary">primary按钮</NiButton>
+                    <NiButton grade="dotted" strong type="info">info按钮</NiButton>
+                    <NiButton grade="dotted" loading type="success">success按钮</NiButton>
+                    <NiButton grade="dotted" type="warning">warning按钮</NiButton>
+                    <NiButton grade="dotted" type="error">error按钮</NiButton>
+                </div>
+                <div>grade 浅色</div>
+                <div>
+                    <NiButton>默认按钮</NiButton>
+                    <NiButton grade="light" type="tertiary">tertiary按钮</NiButton>
+                    <NiButton grade="light" loading type="primary">primary按钮</NiButton>
+                    <NiButton grade="light" strong type="info">info按钮</NiButton>
+                    <NiButton grade="light" loading type="success">success按钮</NiButton>
+                    <NiButton grade="light" type="warning">warning按钮</NiButton>
+                    <NiButton grade="light" type="error">error按钮</NiButton>
+                </div>
+                <div>grade halfTransparent</div>
+                <div>
+                    <NiButton>默认按钮</NiButton>
+                    <NiButton grade="halfTransparent" type="tertiary">tertiary按钮</NiButton>
+                    <NiButton grade="halfTransparent" loading type="primary">primary按钮</NiButton>
+                    <NiButton grade="halfTransparent" strong type="info">info按钮</NiButton>
+                    <NiButton grade="halfTransparent" loading type="success">success按钮</NiButton>
+                    <NiButton grade="halfTransparent" type="warning">warning按钮</NiButton>
+                    <NiButton grade="halfTransparent" type="error">error按钮</NiButton>
+                </div>
+                <div>grade Transparent</div>
+                <div>
+                    <NiButton>默认按钮</NiButton>
+                    <NiButton grade="transparent" type="tertiary">tertiary按钮</NiButton>
+                    <NiButton grade="transparent" loading type="primary">primary按钮</NiButton>
+                    <NiButton grade="transparent" strong type="info">info按钮</NiButton>
+                    <NiButton grade="transparent" loading type="success">success按钮</NiButton>
+                    <NiButton grade="transparent" type="warning">warning按钮</NiButton>
+                    <NiButton grade="transparent" type="error">error按钮</NiButton>
+                </div>
+                <div>disable</div>
+                <div>
+                    <NiButton>默认按钮</NiButton>
+                    <NiButton disabled type="tertiary">tertiary按钮</NiButton>
+                    <NiButton disabled type="primary">primary按钮</NiButton>
+                    <NiButton loading disabled type="info">info按钮</NiButton>
+                    <NiButton disabled type="success">success按钮</NiButton>
+                    <NiButton disabled type="warning">warning按钮</NiButton>
+                    <NiButton disabled type="error">error按钮</NiButton>
+                </div>
+                <div>半圆角</div>
+                <div>
+                    <NiButton>默认按钮</NiButton>
+                    <NiButton angle="round" type="tertiary">tertiary按钮</NiButton>
+                    <NiButton angle="round" type="primary">primary按钮</NiButton>
+                    <NiButton :loading="loading" angle="round" type="info">info按钮</NiButton>
+                    <NiButton angle="round" type="success">success按钮</NiButton>
+                    <NiButton angle="round" type="warning">warning按钮</NiButton>
+                    <NiButton angle="round" type="error">error按钮</NiButton>
+                </div>
+                <div>圆角</div>
+                <div>
+                    <NiButton>A</NiButton>
+                    <NiButton angle="circle" type="tertiary">B</NiButton>
+                    <NiButton angle="circle" type="primary">C</NiButton>
+                    <NiButton :loading="loading" angle="circle" type="info">D</NiButton>
+                    <NiButton loading angle="circle" type="success">E</NiButton>
+                    <NiButton loading angle="circle" type="warning">F</NiButton>
+                    <NiButton angle="circle" type="error">G</NiButton>
+                </div>
+
+            </main>
+        </div>
        <div class="right"></div>
+        <NiPopup v-model:status="blogInfoPopupStatus" width="900" @handleClose="handleCloseBefore">
+            <div @click="blogInfoPopupStatus2 = true">关闭</div>
+            <template #footer>
+                关闭
+            </template>
+        </NiPopup>
+        <NiPopup v-model:status="blogInfoPopupStatus2">
+            <div @click="blogInfoPopupStatus2 = false">
+            </div>
+        </NiPopup>
    </div>
 </template>

@ -69,6 +187,38 @@ onMounted(() => {
        overflow: hidden;
        background: var(--blog-menu-background-color);
        border-right: 1px solid var(--bg-color-be);
+        transition: width .3s ease-in-out;
+        &.menuCollapse{
+            width: 0;
+        }
+        .bar{
+            position: relative;
+            flex-shrink: 0;
+            height: 100%;
+            font-size: 1rem;
+            opacity: 0;
+            color: var(--font-color-top3-h2);
+            transform: rotate(180deg);
+            transition: color .3s, opacity .3s, background-color .3s;
+            border-radius: .25rem;
+            &:hover{
+                background-color: #00000015;
+            }
+        }
+        .awaitShow{
+            height: 0;
+            width: 0;
+            opacity: 0;
+            transition: opacity .3s;
+            overflow: hidden;
+        }
+        &:hover{
+            .awaitShow{
+                height: 100%;
+                width: auto;
+                opacity: 1;
+            }
+        }
        .blogMenuContainer{
            position: relative;
            width: 100%;
@ -84,43 +234,25 @@ onMounted(() => {
                width: 100%;
            }

-            .awaitShow{
-                height: 0;
-                width: 0;
-                opacity: 0;
-                transition: opacity .3s;
-                overflow: hidden;
-            }
-            &:hover{
-                .awaitShow{
-                    height: 100%;
-                    width: auto;
-                    opacity: 1;
-                }
-            }
+
            & > header{
                flex-shrink: 0;
                display: flex;
                width: 100%;
+
                & > div.title{
                    position: relative;
                    flex: 1;
                    color: var(--font-color-top3-h1);
                }
+
                & > div.bar{
-                    position: relative;
-                    flex-shrink: 0;
-                    height: 100%;
-                    aspect-ratio: 1;
-                    display: flex;
-                    align-items: center;
-                    justify-content: center;
-                    font-size: 1.3rem;
-                    color: var(--font-color-top3-h2);
-                    transform: rotate(180deg);
-                    transition: color .5s, opacity .5s;
+                    &:last-child{
+                        font-size: 1.3rem;
+                    }
                    &:hover{
                        color: var(--font-color-top3-h1);
+                        opacity: 1;
                    }
                }
            }
@ -130,10 +262,9 @@ onMounted(() => {
            & > div.line{
                position: relative;
                width: 100%;
-                height: 3px;
+                height: 1px;
                margin: 0.5rem auto;
                background-color: var(--bg-color-be);
-                border-radius: .25rem;
            }
            & > div.blogMenuContent{
                position: relative;
@ -141,7 +272,7 @@ onMounted(() => {
                overflow: hidden;
                & > div.blogMenuItem{
                    position: relative;
-                    font-size: 0.9rem;
+                    font-size: 1rem;
                    display: flex;
                    & > div{
                        position: relative;
@ -153,32 +284,26 @@ onMounted(() => {
                    & > div.text{
                        height: 100%;
                        flex: 1;
+                        display: flex;
+                        align-items: center;
                    }
-                    & > div.bar{
+                    & > div.barBox{
                        margin-left: .2rem;
-                        height: 100%;
-                        //height: 0;
-                        //width: 0;
-                        //opacity: 0;
-                        transition: opacity .3s;
-                        overflow: hidden;
+                        height: 0;
+                        width: 0;
+                        opacity: 0;
                        display: flex;
                    }
-                    &:hover div.bar{
-                        height: 100%;
-                        width: auto;
-                        opacity: 1;
+                    &:hover div.barBox{
+                        height: 100% !important;
+                        width: auto !important;
+                        opacity: 1 !important;
+                        & > div.bar{
+                            opacity: 1;
+                        }
                    }
                }
            }
-
-            .hoverBar{
-                border-radius: .25rem;
-                transition: background-color .3s;
-                &:hover{
-                    background-color: #00000015;
-                }
-            }
            .contentBox{
                position: relative;
                height: 2rem;
@ -188,6 +313,7 @@ onMounted(() => {
                color: var(--font-color-top3-h2);
                user-select: none;
                cursor: pointer;
+                transition: background-color .3s;
                &:hover{
                    background: var(--font-color-top3-hover);
                }
@ -195,6 +321,7 @@ onMounted(() => {
                    color: var(--font-color-top3-h1);
                    background: var(--font-color-top3-active);
                }
+
            }
        }
    }
@ -203,6 +330,32 @@ onMounted(() => {
    }
    & > div.main{
        flex: 1;
+        & > header{
+            position: relative;
+            display: flex;
+            height: 3rem;
+            border-bottom: 1px solid var(--bg-color-be);
+
+            & > div.menuCollapse{
+                position: relative;
+                height: 100%;
+                transition: width .3s;
+                width: 3rem;
+                overflow: hidden;
+                &:hover & > div{
+                    color: var(--font-color-top3-h1);
+                }
+                &.hide{
+                    width: 0;
+                }
+
+                & > div{
+                    font-size: 1.3rem;
+                    color: var(--font-color-top3-h2);
+                    transition: color .5s, opacity .5s;
+                }
+            }
+        }
    }
 }
@media (max-width: 767px){
--- a/pages/index.vue
+++ b/pages/index.vue
@ -159,6 +159,7 @@ onBeforeRouteLeave((to, from, next) => {

        & > a {
            position: relative;
+            box-sizing: border-box;
            height: 100%;
            border-radius: 8px;
            display: flex;