From 235ba886209c81301a30f9046b60365336fcd617 Mon Sep 17 00:00:00 2001 From: expressgy Date: Fri, 25 Apr 2025 18:02:03 +0800 Subject: [PATCH] =?UTF-8?q?=E5=86=99blog=E8=8F=9C=E5=8D=95=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assets/css/base.css | 13 +- assets/css/iconfont.css | 1 + assets/css/style.css | 45 + assets/css/transitions.css | 14 +- assets/css/value.css | 14 +- assets/icon/star-blogIconFont/demo.css | 539 ++++++++++++ assets/icon/star-blogIconFont/demo_index.html | 832 ++++++++++++++++++ assets/icon/star-blogIconFont/iconfont.css | 127 +++ assets/icon/star-blogIconFont/iconfont.js | 1 + assets/icon/star-blogIconFont/iconfont.json | 205 +++++ assets/icon/star-blogIconFont/iconfont.ttf | Bin 0 -> 7636 bytes assets/icon/star-blogIconFont/iconfont.woff | Bin 0 -> 4716 bytes assets/icon/star-blogIconFont/iconfont.woff2 | Bin 0 -> 4008 bytes assets/icon/starIconFont/iconfont.css | 2 +- components/Home/Header.vue | 7 +- components/Home/PageFramework.vue | 20 + components/ResizeContent.vue | 142 +++ docs/07-vue3高性能宽度拖拽调整.md | 221 +++++ layouts/home.vue | 30 +- layouts/start.vue | 7 +- nuxt.config.ts | 2 +- pages/home/blog/index.vue | 205 ++++- pages/home/index.vue | 1 - pages/index.vue | 34 +- 24 files changed, 2405 insertions(+), 57 deletions(-) create mode 100644 assets/icon/star-blogIconFont/demo.css create mode 100644 assets/icon/star-blogIconFont/demo_index.html create mode 100644 assets/icon/star-blogIconFont/iconfont.css create mode 100644 assets/icon/star-blogIconFont/iconfont.js create mode 100644 assets/icon/star-blogIconFont/iconfont.json create mode 100644 assets/icon/star-blogIconFont/iconfont.ttf create mode 100644 assets/icon/star-blogIconFont/iconfont.woff create mode 100644 assets/icon/star-blogIconFont/iconfont.woff2 create mode 100644 components/Home/PageFramework.vue create mode 100644 components/ResizeContent.vue create mode 100644 docs/07-vue3高性能宽度拖拽调整.md diff --git a/assets/css/base.css b/assets/css/base.css index 9798f47..a6b7f12 100644 --- a/assets/css/base.css +++ b/assets/css/base.css @@ -1,8 +1,4 @@ /* 默认字体大小（桌面端） */ -body { - font-size: 16px; - color: var(--color-text); -} h1 { font-size: 24px; @@ -13,11 +9,11 @@ h2 { } h3 { - font-size: 18px; + font-size: 16px; } h4 { - font-size: 16px; + font-size: 14px; } /* * 手机端-手机端-手机端-手机端-手机端-手机端-手机端-手机端-手机端 * */ @@ -59,6 +55,9 @@ h4 { } } + +/* * 平板端-平板端-平板端-平板端-平板端-平板端-平板端-平板端-平板端 * */ + /* 平板端 */ @media (min-width: 768px) and (max-width: 1024px) { body { @@ -82,8 +81,6 @@ h4 { } } -/* * 平板端-平板端-平板端-平板端-平板端-平板端-平板端-平板端-平板端 * */ - /* 平板端（竖屏） */ @media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) { .container { diff --git a/assets/css/iconfont.css b/assets/css/iconfont.css index c27f4c5..7fbf71a 100644 --- a/assets/css/iconfont.css +++ b/assets/css/iconfont.css @@ -1,3 +1,4 @@ @import "../icon/cocoIconFont/iconfont.css"; @import "../icon/sxIconFont/iconfont.css"; @import "../icon/starIconFont/iconfont.css"; +@import "../icon/star-blogIconFont/iconfont.css"; diff --git a/assets/css/style.css b/assets/css/style.css index 307e802..ac28e5c 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -5,4 +5,49 @@ html, body { margin: 0; padding: 0; overflow: hidden; + font-size: 16px; +} +a { + /*去除默认下划线*/ + text-decoration: none; + /*设置初始颜色*/ + color: #333; + /*统一内边距和外边距*/ + margin: 0; + padding: 0; + /*去除默认的点击高亮*/ + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + /*处理不同状态的样式*/ + :link { + color: #333; + } + + :visited { + color: #333; + } + + :hover { + color: #333; + } + + :active { + color: #333; + } +} + +/*单行唱出隐藏显示省略号*/ +.oneLineOverMore{ + white-space: nowrap; /* 确保文本在一行内显示 */ + overflow: hidden; /* 隐藏超出部分 */ + text-overflow: ellipsis; /* 显示省略号 */ +} +/*宽高比*/ +.a11{ + aspect-ratio: 1; +} +/*全居中*/ +.allCenter{ + display: flex; + justify-content: center; + align-items: center; } diff --git a/assets/css/transitions.css b/assets/css/transitions.css index f4328f7..f5a599d 100644 --- a/assets/css/transitions.css +++ b/assets/css/transitions.css @@ -11,12 +11,12 @@ .slide-enter-active, .slide-leave-active { - transition: all 0.5s ease; + transition: all 0.3s ease; } .slide-enter-from, .slide-leave-to { opacity: 0; - transform: translate(100%, 0); + /*transform: translate(100%, 0);*/ } .slide-left-enter-active, @@ -27,17 +27,17 @@ } .slide-left-enter-from { opacity: 0; - transform: translate(50px, 0); + /*transform: translate(50px, 0);*/ } .slide-left-leave-to { opacity: 0; - transform: translate(-50px, 0); + /*transform: translate(-50px, 0);*/ } .slide-right-enter-from { opacity: 0; - transform: translate(-50px, 0); + /*transform: translate(-50px, 0);*/ } .slide-right-leave-to { opacity: 0; - transform: translate(50px, 0); -} \ No newline at end of file + /*transform: translate(50px, 0);*/ +} diff --git a/assets/css/value.css b/assets/css/value.css index 5d90763..1879818 100644 --- a/assets/css/value.css +++ b/assets/css/value.css @@ -24,7 +24,7 @@ /*字体颜色*/ --color-text: #333; --bg-opacity: 0.5; - --header-bg-color: #dddddd99; + --header-bg-color: rgb(254, 255, 252); /*#fefffc*/ /*主要着重颜色*/ --main-strong-color: #333; @@ -32,4 +32,16 @@ --nav-length: 5rem; /*圆角*/ --border-radius: 0.5rem; + /*blog菜单背景色*/ + --blog-menu-background-color: var(--header-bg-color); + /*blog菜单默认宽度*/ + --blog-menu-default-width: calc((100% - var(--main-width-auto)) / 2); + + /*字体颜色*/ + --font-color-top3-h1: #37352f; /*#37352f*/ + --font-color-top3-h2: #5f5e5b; /*1b1b1b*/ + --font-color-top3-h3: #91918e; /*1b1b1b*/ + --font-color-top3-active: rgb(232, 232, 231); /*#e8e8e7*/ + --font-color-top3-hover: rgb(239, 239, 237); /*#EFEFED*/ + } diff --git a/assets/icon/star-blogIconFont/demo.css b/assets/icon/star-blogIconFont/demo.css new file mode 100644 index 0000000..a67054a --- /dev/null +++ b/assets/icon/star-blogIconFont/demo.css @@ -0,0 +1,539 @@ +/* Logo 字体 */ +@font-face { + font-family: "iconfont logo"; + src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834'); + src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'), + url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'), + url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'), + url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg'); +} + +.logo { + font-family: "iconfont logo"; + font-size: 160px; + font-style: normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +/* tabs */ +.nav-tabs { + position: relative; +} + +.nav-tabs .nav-more { + position: absolute; + right: 0; + bottom: 0; + height: 42px; + line-height: 42px; + color: #666; +} + +#tabs { + border-bottom: 1px solid #eee; +} + +#tabs li { + cursor: pointer; + width: 100px; + height: 40px; + line-height: 40px; + text-align: center; + font-size: 16px; + border-bottom: 2px solid transparent; + position: relative; + z-index: 1; + margin-bottom: -1px; + color: #666; +} + + +#tabs .active { + border-bottom-color: #f00; + color: #222; +} + +.tab-container .content { + display: none; +} + +/* 页面布局 */ +.main { + padding: 30px 100px; + width: 960px; + margin: 0 auto; +} + +.main .logo { + color: #333; + text-align: left; + margin-bottom: 30px; + line-height: 1; + height: 110px; + margin-top: -50px; + overflow: hidden; + *zoom: 1; +} + +.main .logo a { + font-size: 160px; + color: #333; +} + +.helps { + margin-top: 40px; +} + +.helps pre { + padding: 20px; + margin: 10px 0; + border: solid 1px #e7e1cd; + background-color: #fffdef; + overflow: auto; +} + +.icon_lists { + width: 100% !important; + overflow: hidden; + *zoom: 1; +} + +.icon_lists li { + width: 100px; + margin-bottom: 10px; + margin-right: 20px; + text-align: center; + list-style: none !important; + cursor: default; +} + +.icon_lists li .code-name { + line-height: 1.2; +} + +.icon_lists .icon { + display: block; + height: 100px; + line-height: 100px; + font-size: 42px; + margin: 10px auto; + color: #333; + -webkit-transition: font-size 0.25s linear, width 0.25s linear; + -moz-transition: font-size 0.25s linear, width 0.25s linear; + transition: font-size 0.25s linear, width 0.25s linear; +} + +.icon_lists .icon:hover { + font-size: 100px; +} + +.icon_lists .svg-icon { + /* 通过设置 font-size 来改变图标大小 */ + width: 1em; + /* 图标和文字相邻时，垂直对齐 */ + vertical-align: -0.15em; + /* 通过设置 color 来改变 SVG 的颜色/fill */ + fill: currentColor; + /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示 + normalize.css 中也包含这行 */ + overflow: hidden; +} + +.icon_lists li .name, +.icon_lists li .code-name { + color: #666; +} + +/* markdown 样式 */ +.markdown { + color: #666; + font-size: 14px; + line-height: 1.8; +} + +.highlight { + line-height: 1.5; +} + +.markdown img { + vertical-align: middle; + max-width: 100%; +} + +.markdown h1 { + color: #404040; + font-weight: 500; + line-height: 40px; + margin-bottom: 24px; +} + +.markdown h2, +.markdown h3, +.markdown h4, +.markdown h5, +.markdown h6 { + color: #404040; + margin: 1.6em 0 0.6em 0; + font-weight: 500; + clear: both; +} + +.markdown h1 { + font-size: 28px; +} + +.markdown h2 { + font-size: 22px; +} + +.markdown h3 { + font-size: 16px; +} + +.markdown h4 { + font-size: 14px; +} + +.markdown h5 { + font-size: 12px; +} + +.markdown h6 { + font-size: 12px; +} + +.markdown hr { + height: 1px; + border: 0; + background: #e9e9e9; + margin: 16px 0; + clear: both; +} + +.markdown p { + margin: 1em 0; +} + +.markdown>p, +.markdown>blockquote, +.markdown>.highlight, +.markdown>ol, +.markdown>ul { + width: 80%; +} + +.markdown ul>li { + list-style: circle; +} + +.markdown>ul li, +.markdown blockquote ul>li { + margin-left: 20px; + padding-left: 4px; +} + +.markdown>ul li p, +.markdown>ol li p { + margin: 0.6em 0; +} + +.markdown ol>li { + list-style: decimal; +} + +.markdown>ol li, +.markdown blockquote ol>li { + margin-left: 20px; + padding-left: 4px; +} + +.markdown code { + margin: 0 3px; + padding: 0 5px; + background: #eee; + border-radius: 3px; +} + +.markdown strong, +.markdown b { + font-weight: 600; +} + +.markdown>table { + border-collapse: collapse; + border-spacing: 0px; + empty-cells: show; + border: 1px solid #e9e9e9; + width: 95%; + margin-bottom: 24px; +} + +.markdown>table th { + white-space: nowrap; + color: #333; + font-weight: 600; +} + +.markdown>table th, +.markdown>table td { + border: 1px solid #e9e9e9; + padding: 8px 16px; + text-align: left; +} + +.markdown>table th { + background: #F7F7F7; +} + +.markdown blockquote { + font-size: 90%; + color: #999; + border-left: 4px solid #e9e9e9; + padding-left: 0.8em; + margin: 1em 0; +} + +.markdown blockquote p { + margin: 0; +} + +.markdown .anchor { + opacity: 0; + transition: opacity 0.3s ease; + margin-left: 8px; +} + +.markdown .waiting { + color: #ccc; +} + +.markdown h1:hover .anchor, +.markdown h2:hover .anchor, +.markdown h3:hover .anchor, +.markdown h4:hover .anchor, +.markdown h5:hover .anchor, +.markdown h6:hover .anchor { + opacity: 1; + display: inline-block; +} + +.markdown>br, +.markdown>p>br { + clear: both; +} + + +.hljs { + display: block; + background: white; + padding: 0.5em; + color: #333333; + overflow-x: auto; +} + +.hljs-comment, +.hljs-meta { + color: #969896; +} + +.hljs-string, +.hljs-variable, +.hljs-template-variable, +.hljs-strong, +.hljs-emphasis, +.hljs-quote { + color: #df5000; +} + +.hljs-keyword, +.hljs-selector-tag, +.hljs-type { + color: #a71d5d; +} + +.hljs-literal, +.hljs-symbol, +.hljs-bullet, +.hljs-attribute { + color: #0086b3; +} + +.hljs-section, +.hljs-name { + color: #63a35c; +} + +.hljs-tag { + color: #333333; +} + +.hljs-title, +.hljs-attr, +.hljs-selector-id, +.hljs-selector-class, +.hljs-selector-attr, +.hljs-selector-pseudo { + color: #795da3; +} + +.hljs-addition { + color: #55a532; + background-color: #eaffea; +} + +.hljs-deletion { + color: #bd2c00; + background-color: #ffecec; +} + +.hljs-link { + text-decoration: underline; +} + +/* 代码高亮 */ +/* PrismJS 1.15.0 +https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */ +/** + * prism.js default theme for JavaScript, CSS and HTML + * Based on dabblet (http://dabblet.com) + * @author Lea Verou + */ +code[class*="language-"], +pre[class*="language-"] { + color: black; + background: none; + text-shadow: 0 1px white; + font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + word-wrap: normal; + line-height: 1.5; + + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; +} + +pre[class*="language-"]::-moz-selection, +pre[class*="language-"] ::-moz-selection, +code[class*="language-"]::-moz-selection, +code[class*="language-"] ::-moz-selection { + text-shadow: none; + background: #b3d4fc; +} + +pre[class*="language-"]::selection, +pre[class*="language-"] ::selection, +code[class*="language-"]::selection, +code[class*="language-"] ::selection { + text-shadow: none; + background: #b3d4fc; +} + +@media print { + + code[class*="language-"], + pre[class*="language-"] { + text-shadow: none; + } +} + +/* Code blocks */ +pre[class*="language-"] { + padding: 1em; + margin: .5em 0; + overflow: auto; +} + +:not(pre)>code[class*="language-"], +pre[class*="language-"] { + background: #f5f2f0; +} + +/* Inline code */ +:not(pre)>code[class*="language-"] { + padding: .1em; + border-radius: .3em; + white-space: normal; +} + +.token.comment, +.token.prolog, +.token.doctype, +.token.cdata { + color: slategray; +} + +.token.punctuation { + color: #999; +} + +.namespace { + opacity: .7; +} + +.token.property, +.token.tag, +.token.boolean, +.token.number, +.token.constant, +.token.symbol, +.token.deleted { + color: #905; +} + +.token.selector, +.token.attr-name, +.token.string, +.token.char, +.token.builtin, +.token.inserted { + color: #690; +} + +.token.operator, +.token.entity, +.token.url, +.language-css .token.string, +.style .token.string { + color: #9a6e3a; + background: hsla(0, 0%, 100%, .5); +} + +.token.atrule, +.token.attr-value, +.token.keyword { + color: #07a; +} + +.token.function, +.token.class-name { + color: #DD4A68; +} + +.token.regex, +.token.important, +.token.variable { + color: #e90; +} + +.token.important, +.token.bold { + font-weight: bold; +} + +.token.italic { + font-style: italic; +} + +.token.entity { + cursor: help; +} diff --git a/assets/icon/star-blogIconFont/demo_index.html b/assets/icon/star-blogIconFont/demo_index.html new file mode 100644 index 0000000..f1f807f --- /dev/null +++ b/assets/icon/star-blogIconFont/demo_index.html @@ -0,0 +1,832 @@ + + + + + iconfont Demo + + + + + + + + + + + + + +
+

+ + +

+
+
    +
  • Unicode
    • +
  • Font class
    • +
  • Symbol
    • +
+ + 查看项目 + +
+
+
+
    + +
  • + +
    通知
    +
    
    +
    • + +
  • + +
    首页
    +
    
    +
    • + +
  • + +
    定位
    +
    
    +
    • + +
  • + +
    日历
    +
    
    +
    • + +
  • + +
    邮件
    +
    
    +
    • + +
  • + +
    标签
    +
    
    +
    • + +
  • + +
    统计
    +
    
    +
    • + +
  • + +
    收藏
    +
    
    +
    • + +
  • + +
    文件
    +
    
    +
    • + +
  • + +
    设置
    +
    
    +
    • + +
  • + +
    喜爱
    +
    
    +
    • + +
  • + +
    指针
    +
    
    +
    • + +
  • + +
    分类
    +
    
    +
    • + +
  • + +
    购物包
    +
    
    +
    • + +
  • + +
    文档
    +
    
    +
    • + +
  • + +
    搜索
    +
    
    +
    • + +
  • + +
    游戏
    +
    
    +
    • + +
  • + +
    统计分析
    +
    
    +
    • + +
  • + +
    我的
    +
    
    +
    • + +
  • + +
    钱包
    +
    
    +
    • + +
  • + +
    消息
    +
    
    +
    • + +
  • + +
    数据动态
    +
    
    +
    • + +
  • + +
    二维码
    +
    
    +
    • + +
  • + +
    更多
    +
    
    +
    • + +
  • + +
    添加
    +
    
    +
    • + +
  • + +
    添加
    +
    
    +
    • + +
  • + +
    更多
    +
    
    +
    • + +
  • + +
    折叠-收起
    +
    
    +
    • + +
+
+

Unicode 引用

+
+ +

Unicode 是字体在网页端最原始的应用方式，特点是：

+
    +
  • 支持按字体的方式去动态调整图标大小，颜色等等。
    • +
  • 默认情况下不支持多色，直接添加多色图标会自动去色。
    • +
+
+

注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）

+
+

Unicode 使用步骤如下：

+

第一步：拷贝项目下面生成的 @font-face

+
@font-face {
+  font-family: 'star-blog';
+  src: url('iconfont.woff2?t=1745569316996') format('woff2'),
+       url('iconfont.woff?t=1745569316996') format('woff'),
+       url('iconfont.ttf?t=1745569316996') format('truetype');
+}
+
+

第二步：定义使用 iconfont 的样式

+
.star-blog {
+  font-family: "star-blog" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+

第三步：挑选相应图标并获取字体编码，应用于页面

+
+<span class="star-blog">&#x33;</span>
+
+
+

"star-blog" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。

+
+
+
+
+
    + +
  • + +
    + 通知 +
    +
    .star-blog-tongzhi +
    +
    • + +
  • + +
    + 首页 +
    +
    .star-blog-shouye +
    +
    • + +
  • + +
    + 定位 +
    +
    .star-blog-dingwei +
    +
    • + +
  • + +
    + 日历 +
    +
    .star-blog-rili +
    +
    • + +
  • + +
    + 邮件 +
    +
    .star-blog-youjian +
    +
    • + +
  • + +
    + 标签 +
    +
    .star-blog-biaoqian +
    +
    • + +
  • + +
    + 统计 +
    +
    .star-blog-tongji +
    +
    • + +
  • + +
    + 收藏 +
    +
    .star-blog-shoucang +
    +
    • + +
  • + +
    + 文件 +
    +
    .star-blog-wenjian +
    +
    • + +
  • + +
    + 设置 +
    +
    .star-blog-shezhi +
    +
    • + +
  • + +
    + 喜爱 +
    +
    .star-blog-xiai +
    +
    • + +
  • + +
    + 指针 +
    +
    .star-blog-zhizhen +
    +
    • + +
  • + +
    + 分类 +
    +
    .star-blog-fenlei +
    +
    • + +
  • + +
    + 购物包 +
    +
    .star-blog-gouwubao +
    +
    • + +
  • + +
    + 文档 +
    +
    .star-blog-wendang +
    +
    • + +
  • + +
    + 搜索 +
    +
    .star-blog-sousuo +
    +
    • + +
  • + +
    + 游戏 +
    +
    .star-blog-youxi +
    +
    • + +
  • + +
    + 统计分析 +
    +
    .star-blog-tongjifenxi +
    +
    • + +
  • + +
    + 我的 +
    +
    .star-blog-wode +
    +
    • + +
  • + +
    + 钱包 +
    +
    .star-blog-qianbao +
    +
    • + +
  • + +
    + 消息 +
    +
    .star-blog-xiaoxi +
    +
    • + +
  • + +
    + 数据动态 +
    +
    .star-blog-shujudongtai +
    +
    • + +
  • + +
    + 二维码 +
    +
    .star-blog-erweima +
    +
    • + +
  • + +
    + 更多 +
    +
    .star-blog-gengduo +
    +
    • + +
  • + +
    + 添加 +
    +
    .star-blog-tianjia +
    +
    • + +
  • + +
    + 添加 +
    +
    .star-blog-tianjia1 +
    +
    • + +
  • + +
    + 更多 +
    +
    .star-blog-gengduo1 +
    +
    • + +
  • + +
    + 折叠-收起 +
    +
    .star-blog-zhedie-shouqi +
    +
    • + +
+
+

font-class 引用

+
+ +

font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。

+

与 Unicode 使用方式相比，具有如下特点：

+
    +
  • 相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。
    • +
  • 因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。
    • +
+

使用步骤如下：

+

第一步：引入项目下面生成的 fontclass 代码：

+
<link rel="stylesheet" href="./iconfont.css">
+
+

第二步：挑选相应图标并获取类名，应用于页面：

+
<span class="star-blog star-blog-xxx"></span>
+
+
+

" + star-blog" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。

+
+
+
+
+
    + +
  • + +
    通知
    +
    #star-blog-tongzhi
    +
    • + +
  • + +
    首页
    +
    #star-blog-shouye
    +
    • + +
  • + +
    定位
    +
    #star-blog-dingwei
    +
    • + +
  • + +
    日历
    +
    #star-blog-rili
    +
    • + +
  • + +
    邮件
    +
    #star-blog-youjian
    +
    • + +
  • + +
    标签
    +
    #star-blog-biaoqian
    +
    • + +
  • + +
    统计
    +
    #star-blog-tongji
    +
    • + +
  • + +
    收藏
    +
    #star-blog-shoucang
    +
    • + +
  • + +
    文件
    +
    #star-blog-wenjian
    +
    • + +
  • + +
    设置
    +
    #star-blog-shezhi
    +
    • + +
  • + +
    喜爱
    +
    #star-blog-xiai
    +
    • + +
  • + +
    指针
    +
    #star-blog-zhizhen
    +
    • + +
  • + +
    分类
    +
    #star-blog-fenlei
    +
    • + +
  • + +
    购物包
    +
    #star-blog-gouwubao
    +
    • + +
  • + +
    文档
    +
    #star-blog-wendang
    +
    • + +
  • + +
    搜索
    +
    #star-blog-sousuo
    +
    • + +
  • + +
    游戏
    +
    #star-blog-youxi
    +
    • + +
  • + +
    统计分析
    +
    #star-blog-tongjifenxi
    +
    • + +
  • + +
    我的
    +
    #star-blog-wode
    +
    • + +
  • + +
    钱包
    +
    #star-blog-qianbao
    +
    • + +
  • + +
    消息
    +
    #star-blog-xiaoxi
    +
    • + +
  • + +
    数据动态
    +
    #star-blog-shujudongtai
    +
    • + +
  • + +
    二维码
    +
    #star-blog-erweima
    +
    • + +
  • + +
    更多
    +
    #star-blog-gengduo
    +
    • + +
  • + +
    添加
    +
    #star-blog-tianjia
    +
    • + +
  • + +
    添加
    +
    #star-blog-tianjia1
    +
    • + +
  • + +
    更多
    +
    #star-blog-gengduo1
    +
    • + +
  • + +
    折叠-收起
    +
    #star-blog-zhedie-shouqi
    +
    • + +
+
+

Symbol 引用

+
+ +

这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章 + 这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：

+
    +
  • 支持多色图标了，不再受单色限制。
    • +
  • 通过一些技巧，支持像字体那样，通过 font-size, color 来调整样式。
    • +
  • 兼容性较差，支持 IE9+，及现代浏览器。
    • +
  • 浏览器渲染 SVG 的性能一般，还不如 png。
    • +
+

使用步骤如下：

+

第一步：引入项目下面生成的 symbol 代码：

+
<script src="./iconfont.js"></script>
+
+

第二步：加入通用 CSS 代码（引入一次就行）：

+
<style>
+.icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+</style>
+
+

第三步：挑选相应图标并获取类名，应用于页面：

+
<svg class="icon" aria-hidden="true">
+  <use xlink:href="#icon-xxx"></use>
+</svg>
+
+
+
+ +
+
+ + + diff --git a/assets/icon/star-blogIconFont/iconfont.css b/assets/icon/star-blogIconFont/iconfont.css new file mode 100644 index 0000000..8b49758 --- /dev/null +++ b/assets/icon/star-blogIconFont/iconfont.css @@ -0,0 +1,127 @@ +@font-face { + font-family: "star-blog"; /* Project id 4905744 */ + src: url('iconfont.woff2?t=1745569316996') format('woff2'), + url('iconfont.woff?t=1745569316996') format('woff'), + url('iconfont.ttf?t=1745569316996') format('truetype'); +} + +.star-blogIconFont { + font-family: "star-blog" !important; + font-size: 16px; + font-style: normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.star-blog-tongzhi:before { + content: "\e669"; +} + +.star-blog-shouye:before { + content: "\e66a"; +} + +.star-blog-dingwei:before { + content: "\e66c"; +} + +.star-blog-rili:before { + content: "\e66d"; +} + +.star-blog-youjian:before { + content: "\e66e"; +} + +.star-blog-biaoqian:before { + content: "\e66f"; +} + +.star-blog-tongji:before { + content: "\e670"; +} + +.star-blog-shoucang:before { + content: "\e671"; +} + +.star-blog-wenjian:before { + content: "\e672"; +} + +.star-blog-shezhi:before { + content: "\e673"; +} + +.star-blog-xiai:before { + content: "\e674"; +} + +.star-blog-zhizhen:before { + content: "\e675"; +} + +.star-blog-fenlei:before { + content: "\e676"; +} + +.star-blog-gouwubao:before { + content: "\e677"; +} + +.star-blog-wendang:before { + content: "\e678"; +} + +.star-blog-sousuo:before { + content: "\e679"; +} + +.star-blog-youxi:before { + content: "\e67a"; +} + +.star-blog-tongjifenxi:before { + content: "\e67b"; +} + +.star-blog-wode:before { + content: "\e67c"; +} + +.star-blog-qianbao:before { + content: "\e67d"; +} + +.star-blog-xiaoxi:before { + content: "\e67e"; +} + +.star-blog-shujudongtai:before { + content: "\e680"; +} + +.star-blog-erweima:before { + content: "\e681"; +} + +.star-blog-gengduo:before { + content: "\e73a"; +} + +.star-blog-tianjia:before { + content: "\e608"; +} + +.star-blog-tianjia1:before { + content: "\e668"; +} + +.star-blog-gengduo1:before { + content: "\e606"; +} + +.star-blog-zhedie-shouqi:before { + content: "\e67f"; +} + diff --git a/assets/icon/star-blogIconFont/iconfont.js b/assets/icon/star-blogIconFont/iconfont.js new file mode 100644 index 0000000..fa415f1 --- /dev/null +++ b/assets/icon/star-blogIconFont/iconfont.js @@ -0,0 +1 @@ +window._iconfont_svg_string_4905744='',(l=>{var a=(t=(t=document.getElementsByTagName("script"))[t.length-1]).getAttribute("data-injectcss"),t=t.getAttribute("data-disable-injectsvg");if(!t){var i,h,o,c,s,e=function(a,t){t.parentNode.insertBefore(a,t)};if(a&&!l.__iconfont__svg__cssinject__){l.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(a){console&&console.log(a)}}i=function(){var a,t=document.createElement("div");t.innerHTML=l._iconfont_svg_string_4905744,(t=t.getElementsByTagName("svg")[0])&&(t.setAttribute("aria-hidden","true"),t.style.position="absolute",t.style.width=0,t.style.height=0,t.style.overflow="hidden",t=t,(a=document.body).firstChild?e(t,a.firstChild):a.appendChild(t))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(i,0):(h=function(){document.removeEventListener("DOMContentLoaded",h,!1),i()},document.addEventListener("DOMContentLoaded",h,!1)):document.attachEvent&&(o=i,c=l.document,s=!1,d(),c.onreadystatechange=function(){"complete"==c.readyState&&(c.onreadystatechange=null,p())})}function p(){s||(s=!0,o())}function d(){try{c.documentElement.doScroll("left")}catch(a){return void setTimeout(d,50)}p()}})(window); \ No newline at end of file diff --git a/assets/icon/star-blogIconFont/iconfont.json b/assets/icon/star-blogIconFont/iconfont.json new file mode 100644 index 0000000..6629e61 --- /dev/null +++ b/assets/icon/star-blogIconFont/iconfont.json @@ -0,0 +1,205 @@ +{ + "id": "4905744", + "name": "star-blog", + "font_family": "star-blog", + "css_prefix_text": "star-blog-", + "description": "", + "glyphs": [ + { + "icon_id": "23027728", + "name": "通知", + "font_class": "tongzhi", + "unicode": "e669", + "unicode_decimal": 58985 + }, + { + "icon_id": "23027729", + "name": "首页", + "font_class": "shouye", + "unicode": "e66a", + "unicode_decimal": 58986 + }, + { + "icon_id": "23027731", + "name": "定位", + "font_class": "dingwei", + "unicode": "e66c", + "unicode_decimal": 58988 + }, + { + "icon_id": "23027732", + "name": "日历", + "font_class": "rili", + "unicode": "e66d", + "unicode_decimal": 58989 + }, + { + "icon_id": "23027733", + "name": "邮件", + "font_class": "youjian", + "unicode": "e66e", + "unicode_decimal": 58990 + }, + { + "icon_id": "23027734", + "name": "标签", + "font_class": "biaoqian", + "unicode": "e66f", + "unicode_decimal": 58991 + }, + { + "icon_id": "23027735", + "name": "统计", + "font_class": "tongji", + "unicode": "e670", + "unicode_decimal": 58992 + }, + { + "icon_id": "23027736", + "name": "收藏", + "font_class": "shoucang", + "unicode": "e671", + "unicode_decimal": 58993 + }, + { + "icon_id": "23027737", + "name": "文件", + "font_class": "wenjian", + "unicode": "e672", + "unicode_decimal": 58994 + }, + { + "icon_id": "23027738", + "name": "设置", + "font_class": "shezhi", + "unicode": "e673", + "unicode_decimal": 58995 + }, + { + "icon_id": "23027739", + "name": "喜爱", + "font_class": "xiai", + "unicode": "e674", + "unicode_decimal": 58996 + }, + { + "icon_id": "23027740", + "name": "指针", + "font_class": "zhizhen", + "unicode": "e675", + "unicode_decimal": 58997 + }, + { + "icon_id": "23027741", + "name": "分类", + "font_class": "fenlei", + "unicode": "e676", + "unicode_decimal": 58998 + }, + { + "icon_id": "23027742", + "name": "购物包", + "font_class": "gouwubao", + "unicode": "e677", + "unicode_decimal": 58999 + }, + { + "icon_id": "23027743", + "name": "文档", + "font_class": "wendang", + "unicode": "e678", + "unicode_decimal": 59000 + }, + { + "icon_id": "23027744", + "name": "搜索", + "font_class": "sousuo", + "unicode": "e679", + "unicode_decimal": 59001 + }, + { + "icon_id": "23027745", + "name": "游戏", + "font_class": "youxi", + "unicode": "e67a", + "unicode_decimal": 59002 + }, + { + "icon_id": "23027746", + "name": "统计分析", + "font_class": "tongjifenxi", + "unicode": "e67b", + "unicode_decimal": 59003 + }, + { + "icon_id": "23027747", + "name": "我的", + "font_class": "wode", + "unicode": "e67c", + "unicode_decimal": 59004 + }, + { + "icon_id": "23027748", + "name": "钱包", + "font_class": "qianbao", + "unicode": "e67d", + "unicode_decimal": 59005 + }, + { + "icon_id": "23027749", + "name": "消息", + "font_class": "xiaoxi", + "unicode": "e67e", + "unicode_decimal": 59006 + }, + { + "icon_id": "23027750", + "name": "数据动态", + "font_class": "shujudongtai", + "unicode": "e680", + "unicode_decimal": 59008 + }, + { + "icon_id": "23027751", + "name": "二维码", + "font_class": "erweima", + "unicode": "e681", + "unicode_decimal": 59009 + }, + { + "icon_id": "577338", + "name": "更多", + "font_class": "gengduo", + "unicode": "e73a", + "unicode_decimal": 59194 + }, + { + "icon_id": "18799718", + "name": "添加", + "font_class": "tianjia", + "unicode": "e608", + "unicode_decimal": 58888 + }, + { + "icon_id": "23027730", + "name": "添加", + "font_class": "tianjia1", + "unicode": "e668", + "unicode_decimal": 58984 + }, + { + "icon_id": "24990207", + "name": "更多", + "font_class": "gengduo1", + "unicode": "e606", + "unicode_decimal": 58886 + }, + { + "icon_id": "36594927", + "name": "折叠-收起", + "font_class": "zhedie-shouqi", + "unicode": "e67f", + "unicode_decimal": 59007 + } + ] +} diff --git a/assets/icon/star-blogIconFont/iconfont.ttf b/assets/icon/star-blogIconFont/iconfont.ttf new file mode 100644 index 0000000000000000000000000000000000000000..205a0c2f2102a67a2d11099cdfa50c91cc8d4d19 GIT binary patch literal 7636 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 Tp@!Mxt;7$z6u8Rz7y$SW&YIC# literal 0 HcmV?d00001 diff --git a/assets/icon/star-blogIconFont/iconfont.woff2 b/assets/icon/star-blogIconFont/iconfont.woff2 new file mode 100644 index 0000000000000000000000000000000000000000..4d50b11b0381c5452e3d0c8fa27ace7118591285 GIT binary patch literal 4008 zcmV;Z4_EMaPew8T0RR9101v1D3jhEB03Fl-01sIJ0RR9100000000000000000000 z0000SR0d!Gh6)O(bfHfHHUcCAbPGHH1Rw>3a|eP#8!s87qK=bRaAbd-z=2#Ht6&6T zZBgl_`eMT}s)<#!dhI*B^WSI?u{?}Rh?@~`9bue@Qu08*-?ww+i&)xqRFY1|E1STZ zRwBtl#!G<|h+-wY;pyhTp=%Dn&)DkH#A=ZGF#NxBnZtJIHx*%yaC5*4eXjXUe_xt^ zp%G{|rw#*Ut;YtxVj`++&#I(G69dD)XO*{Z&`~hZqFBMfLhj8n@6IoGPLpDUV7#D` z^vLh~QUeG8R{Fm+(`HjnccFvLVVocjf~QeLL;w1gBcSduo8U|5w-0Rpp$LW@3Kg^s z+5OGmbIbq#0CoQEM(YA8 zXomj*ugd~hpr8s8C0R*XMO95*LsLszM;8Vb4jus=5eXRxWk}kDu;)fCfnV(iEWTI@ zFas+9=3odAz)FA!rU4RI1(3lEKnaXspo6UeDqt1{`j`W#fq8&BSO92%MSv#QGe8UM z1)vS~3eW+21L%Ui1N6W?0Qz8`00XcufFam7zzFOIs%2uo0AsK}+-3s&US==_up*f5 zW)CZW!>W&1aQp|8qF@U&S}G8=L6F3 zr*c$ylDZF|hn!=Gcj5{* zKya^5NhttDZ;8v$qjq@uvGTA@Zha6Tk>g;105FvzD8+Sindhy;ktUndxu{KDr;t(# zg7)Fa(%M=!#JoC%rt((E58q27&l|pW5aGeHdv?1idvGB?22YZrA0&X=DBCXKN7{-{v~G07nE9nn*a&JKJER4uj2y?NW5dp%5$AF>peH%VCNA|- zX=Br>ct6RyV2a5Enf@(*~*7K^yNh3sQiP9I0l6@|_1pvJL{Qae#-o$`> z;|W>4+lsqU)(C!pRmWP1V~_YeiXRX|-cDAg84h^ZGZCrnnBNZkL+1l$mjzp5Vlz;; z_^KdUiS7)P2M$*urnt}&<6a+8E4R-wf>{+o8i4J=dK~q!3KN{JM^}0<#w3)7E;c}w zNW?#xB;GFEobTJE=TrUk;;jYVCLGJyk(z^|*_o;XlTbqS37BliO~M4MI~~pH6+;IP zN0ju$$ng#j*Q5@zDLX)CJu&px)CfK%!BfvymxtwfPaNbecm@|fzn0?9e|ii@o;N30 zt#$!(T?dbXEsFJLUdS(rZn%fWFRAGAjyZ{OBtDv>(QBWEZ7%cxlv1Xtjr>}>aQUio z9bQ9MgiLX)^R|b|9o2!j!aQu)3}TJkTQiqbt<}#D4`2G*&kn zQwG?$!T~}j$NC7KuqeVE^8JcgX7r*r{&$w!AwrOiGgdC!5!&a?9A>RJimP~MTaC)z z0#C=PF5b_RxMVpivh}ET|Ceo_t^cfTMfyK^zl;pg-|wIP)v7Q0Eu4nU4^KHYB``f$ zB~+~y4M=@cXia=(}$08 zGulw$0(BWUFSP+$gc}L`OikyFhnLRB+_GQ99K4 z7~QzuxA7=9VCUE{=z(hw7upV7XLTH5fI0ez?sWb&EY%H z4}VRlJXoE4dYX}cP1b$HoaumZ1gyy`Fclk(#iseAjJm9e%AnakA5+7v!I0YMLm$_@ zI@F1&<$OV%=x&_upwHi6bQs!9@@#8wo0hXQXIa^$ub0GbhmM^0Jnxe7l78@#;n{=r zWGIB4IA#0g1u%2L`fgK%5y&)TgmCx5Xg|ZgI~WPYL6O2C@0OPhaoU|jkdG0c6|O8F zNxyXC+nlX>5e{3IzO7vPAsMui#H-&fl`YGeS~;z3;4%+Mj1G%3?4HQ*M`yH6>&p$F z=vo-=CJ&r8F%0~>mERlRlXsRC<=Kx*#wN(!v4sOmU}Y*8{1zhU@$v4#xo!ie;#Yn& z@?;=L?!m_6k|W_LH@MS_--mDxfgA}XC!VX>d|^c7aOl937ley-h~eP>DYeB=tSc0Q~~zr<9C5&;!wly=k#r*x4$ambCpoP@(wADjOox`UA4>( z3-rHWdvh}kr^3x{fAFv2x`KS2eHB92uxrrY#QbbOIKHQ;Qtee{Wvg;j$Goa6)t~4+ zrpnS}DZT1rIqGand-rOuRwDtp5MRxm&=K(2S|8g1@bSWoC+>pZ)|Eq*MY4GX|+FrocG;#+-=o0k{F(A_`X1 zY=XmugRO2g{uO0Z zrt_+dI2(?r*7>zwuhy@tMohR1z>2%Emg;It51}&m$WryE=vTh6U;ZH4>9MkY?dTFp zIrYv!(az{5V1Dpoqc~oS!rM>0NW75VSoeZ|KR>Y_X?{$RlQ-S%A#8R#_}n)`g7PWThs9oRvFl#hl<%wZ7&N`>-)9PO@kF zr%%@Ur!eQUY6nwpq1-5~%hA^EaN*ahGrTfGp~z5bQSKA`mNZ$VBElTH`9Yw*<6lx865Sj2SrVjuCmpl*k4PT(zbprM%CI> zigZzDVo*M1%oN&PHWkXlbc6dW>dvHY_C+1398~BR#5vBd7>b?QYi8z913M#7wiS;* z6{pk949vjhX2rT5>}OrEuCgwq_HC=Hi`LS$(K9wiN7u!GTtGJfI?P%4`@%&}7u`~4 zR^oOteL0!E7?AD5h2FlwtzL2ii|C18z4&DyFwq|G4g}os1L6a2ci<(DJF%PP|DZV2y|G9f9}bS?dCYbM*pE+bx`Fh1PaH4h zHpbj*LV)AhQwf%y^yZPyERgZ+|B!|I$l~~HR#eB8V@rADRTCw-(!#_zv%UiFi#v55 zSaRlbP~`Rb@sl$vQ%1gjo-kd0FFY(Z447GNUF1i?aiaH+0||bf*tu(O|I=>0$FEys z3POJLztuXq_*KvI7-rS8!l5jw*gGZ)Tu1@wKB8vd}F;STB3MylH@LMio2Z03nbY zC9cBTo%J%r$i=`%0}D<^1&t_o03=elserBmD$)~RqA2ghI5h>;7k5DoTfPHA$e$@g zfl$oxD62y%T>KCvpe0CLTQe!YN#;mhbsXVqOUkgk8dln!sDtQ6ZD%?qcU)Fp@fk}!q2{7#(j0Q{<#h17e#6~1LLPpU?YRUC_ z#T{WnzjUwId?5*m3gMTu#po&JyS|8Jls!n03g8CiSBXR+Q!-K#z6I6BG;tfGwJ_LI O9v~4qLkzIU7ytmEamla% literal 0 HcmV?d00001 diff --git a/assets/icon/starIconFont/iconfont.css b/assets/icon/starIconFont/iconfont.css index 1aba66b..b26ecc3 100644 --- a/assets/icon/starIconFont/iconfont.css +++ b/assets/icon/starIconFont/iconfont.css @@ -1,7 +1,7 @@ @font-face { font-family: "starIconFont"; /* Project id 4902296 */ /* Color fonts */ - src: + src: url('iconfont.woff2?t=1745398567721') format('woff2'), url('iconfont.woff?t=1745398567721') format('woff'), url('iconfont.ttf?t=1745398567721') format('truetype'); diff --git a/components/Home/Header.vue b/components/Home/Header.vue index 0c8249e..2073ed0 100644 --- a/components/Home/Header.vue +++ b/components/Home/Header.vue @@ -1,6 +1,5 @@ + + + + diff --git a/components/ResizeContent.vue b/components/ResizeContent.vue new file mode 100644 index 0000000..36f768c --- /dev/null +++ b/components/ResizeContent.vue @@ -0,0 +1,142 @@ + + + + + + diff --git a/docs/07-vue3高性能宽度拖拽调整.md b/docs/07-vue3高性能宽度拖拽调整.md new file mode 100644 index 0000000..4c2925a --- /dev/null +++ b/docs/07-vue3高性能宽度拖拽调整.md @@ -0,0 +1,221 @@ +> deepseek +> +> 以下是在 Vue3 中实现高性能拖拽调整宽度的 **完整代码**，包含详细注释和优化策略： + +```vue + + + + + +``` + +### 关键优化注释说明： + +1. **性能优化策略**： + ```javascript + // 使用 CSS 变量直接操作样式 + resizableElement.value.style.setProperty('--width', ...) + + // 通过 RAF 节流高频事件 + cancelAnimationFrame(rafId) + rafId = requestAnimationFrame(...) + + // passive 事件监听提升滚动性能 + { passive: true } + ``` + +2. **跨平台支持**： + ```javascript + // 统一处理鼠标/触摸事件 + const clientX = e.clientX ?? e.touches[0].clientX + ``` + +3. **内存管理**： + ```javascript + onBeforeUnmount(() => { + cancelAnimationFrame(rafId) // 避免内存泄漏 + }) + ``` + +4. **渲染优化**： + ```css + will-change: width; /* 提前告知浏览器变化属性 */ + transform: translateZ(0); /* 强制开启 GPU 加速 */ + ``` + +### 扩展建议用法： + +1. **添加约束条件**： + ```javascript + // 在 handleDrag 中扩展 + const maxWidth = 800 // 或通过 props 传入 + const clampedWidth = Math.max(100, Math.min(maxWidth, newWidth)) + ``` + +2. **持久化存储**： + ```javascript + // 在 stopDrag 中添加 + localStorage.setItem('savedWidth', width.value) + // 初始化时读取 + width.value = Number(localStorage.getItem('savedWidth')) || 300 + ``` + +3. **性能监控（开发环境）**： + ```javascript + import { usePerf } from '@vueuse/core' + const { fps } = usePerf() + // 在拖拽时观察 fps 值 + ``` + +该方案经过测试在以下场景表现良好： +- 2000px 快速拖拽（平均 58fps） +- 低端移动设备（Redmi 9A，45fps） +- 复杂页面环境（多图表+动画场景，52fps） + +建议根据实际需求调整过渡动画时间和手柄样式，可在不影响性能的前提下提升视觉体验。 diff --git a/layouts/home.vue b/layouts/home.vue index e2f090d..34d5101 100644 --- a/layouts/home.vue +++ b/layouts/home.vue @@ -6,7 +6,7 @@
- +
@@ -25,30 +25,16 @@ flex-shrink: 0; } - .homeMain { + div.homeMain { + position: relative; + overflow-y: hidden; flex: 1; width: 100%; - overflow: hidden; - display: flex; - - & > * { - position: relative; - overflow-y: auto; - } - - & > .homeMainLeft { - flex: 1; - } - & > main.homeMainContent { - flex-shrink: 0; - width: var(--main-width-auto); - background-color: var(--bg-color-be); - } - - & > .homeMainRight { - flex: 1; - + position: relative; + width: 100%; + height: 100%; + overflow: auto; } } } diff --git a/layouts/start.vue b/layouts/start.vue index 45c67d1..de2078c 100644 --- a/layouts/start.vue +++ b/layouts/start.vue @@ -8,5 +8,10 @@ diff --git a/nuxt.config.ts b/nuxt.config.ts index 60aa9e8..705ca03 100644 --- 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', /*'@nuxtjs/tailwindcss'*/], devServer: { host: '0.0.0.0', port: 3000, diff --git a/pages/home/blog/index.vue b/pages/home/blog/index.vue index c8f8f41..0ae12e8 100644 --- a/pages/home/blog/index.vue +++ b/pages/home/blog/index.vue @@ -6,12 +6,209 @@ definePageMeta({ mode: 'out-in', }, }) -const {data} = useFetch('/api/blog/blogMenu') +const menuList = ref([]); + +const getMenuListFetch = async () => { + const { data, pending, error } = await useFetch('/api/blog/blogMenu'); + if (error.value) { + consola.error('数据获取失败:', error.value); + } + menuList.value = data.value?.filter(i => i.pid === '0') +} + + +// SSR运行 +await getMenuListFetch() +onMounted(() => { + consola.log(menuList.value) + +}) - \ No newline at end of file + diff --git a/pages/home/index.vue b/pages/home/index.vue index 172a6e3..528cc45 100644 --- a/pages/home/index.vue +++ b/pages/home/index.vue @@ -7,7 +7,6 @@ definePageMeta({ }, }) const {data} = await useFetch('/api/hello') -consola.info(toValue(data))