样式和乱码修改

docs/Backend/Go/gRPC/1.gRPC-基础知识.md

@@ -33,7 +33,7 @@ gRPC 支持多种编程语言，具体列表可以参考其 GitHub 主页：[htt
 | ------------ | ---------------------------------- | -------------------------- |
 | 格式         | 二进制                             | 文本                       |
 | 大小         | 较小，二进制格式                   | 较大，尤其在数据结构复杂时 |
-| 可读性       | 需要解析器和 `.proto` 文件         | 人类可读，易��理解         |
+| 可读性       | 需要解析器和 `.proto` 文件         | 人类可读，易于理解         |
 | 序列化速度   | 快，二进制格式                     | 慢，文本格式               |
 | 解析速度     | 快，解析过程简化                   | 慢，需要解析文本           |
 | 语言支持     | 多种语言，需 `.proto` 文件生成代码 | 几乎所有语言都有原生支持   |

docs/Backend/Go/函数/2.类型和泛型.md

@@ -66,7 +66,7 @@ func sum(a, b int) {
 
 ## 泛型
 
-泛型是在使���时才确定类型的。在 Go 中，泛型需要显式定义才能使用。
+泛型是在使用时才确定类型的。在 Go 中，泛型需要显式定义才能使用。
 
 ```go
 package main

docs/Backend/Java/Maven/20.Maven-生命周期.md

@@ -34,7 +34,7 @@ compile
 编译项目的源代码。
 
 process-classes  
-对编译后的字节���进行操作，如字节码增强。
+对编译后的字节源码进行操作，如字节码增强。
 
 generate-test-sources  
 生成测试代码。

docs/Backend/Java/Maven/40.Maven-依赖项解读.md

@@ -214,7 +214,7 @@ Spring Boot 开发工具库，提供在开发时非常有用的功能，如自
 **最佳实践**
 
 - 仅在开发环境中使用该依赖，避免在生产环境中包含开发工具。
-- 配置 `application.properties`，根���需求启用或禁用特定的开发功能。
+- 配置 `application.properties`，根据需求启用或禁用特定的开发功能。
 
 ## 依赖项管理的最佳实践
 

docs/Backend/Java/面向对象/140.静态属性和方法.md

@@ -41,7 +41,7 @@ public class Person {
 
 ## 静态属性的使用场景和最佳实践
 
-静态属性常用于定义类级别的常量或共享数据。例如���计数器、配置参数等适合使用静态属性。此外，静态属性可以减少内存的使用，因为它们只在类加载时创建一次。
+静态属性常用于定义类级别的常量或共享数据。例如计数器、配置参数等适合使用静态属性。此外，静态属性可以减少内存的使用，因为它们只在类加载时创建一次。
 
 在使用静态属性时，应遵循以下最佳实践：
 

docs/Backend/Python/基础/020-编码和字符集.md

@@ -86,7 +86,7 @@ if True:
 
 ### 多行语句
 
-在 Python 中，一行中未完成的语句可继续在下一行。使用反斜杠或在括号中分行可使代码更易读。在实际开发中，我会 ��� 长表达式分多行以保持代码清晰。
+在 Python 中，一行中未完成的语句可继续在下一行。使用反斜杠或在括号中分行可使代码更易读。在实际开发中，我会长表达式分多行以保持代码清晰。
 
 ```python
 total = itemPriceOne + \
@@ -146,7 +146,7 @@ print(f"You entered {userNumber}")
 
 ![等待用户输入示例](../images/a59934f5b4f85b3842b1f04267b3f299.png)
 
-input 函数会返回字符串，即便用户输入数 ��� 也同样如此。如果用户输入非数字字符而我调用 int 转换，会产生异常。在实际开发中，我会使用异常处理确保程序在输入不合法时能够给出提示或采取默认值。
+input 函数会返回字符串，即便用户输入数字也同样如此。如果用户输入非数字字符而我调用 int 转换，会产生异常。在实际开发中，我会使用异常处理确保程序在输入不合法时能够给出提示或采取默认值。
 
 ```python
 try:

docs/Frontend/JavaScript/ES3~ES5/120.原型与继承.md

@@ -337,7 +337,7 @@ document.write(obj2);
 
 ## 原型方法的重写
 
-`Number.prototype`和`Object.prototype`都有`toString`方法。如果`Number.prototype`没有自己的`toString`方法，会继承自`Object.prototype.toString`，这可能无法实现预期的功能。因此，数 ��� 对象的原型`Number.prototype`重写了`toString`方法。
+`Number.prototype`和`Object.prototype`都有`toString`方法。如果`Number.prototype`没有自己的`toString`方法，会继承自`Object.prototype.toString`，这可能无法实现预期的功能。因此，数据对象的原型`Number.prototype`重写了`toString`方法。
 
 ![](../images/10ef84181f576635724e34fdbb57c789.png)
 

docs/Frontend/JavaScript/ES6-API/7.Unicode表示法-字符串方法-模板字符串.md

@@ -27,8 +27,8 @@ console.log(normalChar.length); // 1 代表一个字符
 // 特殊字符长度
 console.log(specialChar.length); // 2 代表一个字符
 // charAt 返回索引位的字符
-console.log(specialChar.charAt(0)); // � 无法正确表示一个字符
-console.log(specialChar.charAt(1)); // � 无法正确表示一个字符
+console.log(specialChar.charAt(0)); // 无法正确表示一个字符
+console.log(specialChar.charAt(1)); // 无法正确表示一个字符
 // ES5 返回对应的字符编码
 console.log(specialChar.charCodeAt(0)); // 55362
 console.log(specialChar.charCodeAt(1)); // 57271

docs/Frontend/Node/90.package.json.md

@@ -157,7 +157,7 @@
 }
 ```
 
-**files** 指定发布到 npm 包中的文件和目录。��如：
+**files** 指定发布到 npm 包中的文件和目录。如：
 
 ```json
 {

docs/Frontend/Vue/Vue基础入门/30.插值-编译-内置指令.md

@@ -97,7 +97,7 @@ Vue.createApp(App).mount('#app');
 
 `v-once` 指令用于一次性渲染元素或组件。使用 `v-once` 的元素及其所有子节点只会渲染一次，之后即使数据发生变化，也不会重新渲染。这对于静态内容的渲染可以提升性能。
 
-1. **使用 `v-once` 时，�� 会影响其内部的子元素，使内部的指令仅执行一次。**
+1. **使用 `v-once` 时，会影响其内部的子元素，使内部的指令仅执行一次。**
 2. **视图中，`Vue` 指定的插值表达式的数据变量必须在实例上声明。**
 
 ## v-html
@@ -144,7 +144,7 @@ Vue.createApp(App).mount('#app');
    Vue.createApp(App).mount('#app');
    ```
 
-4. `Vue` 底层有自己的一 �� 编译系统，模板内容必须经过 `Vue` 的编译系统才能正确渲染为真实的 `DOM`。
+4. `Vue` 底层有自己的一套编译系统，模板内容必须经过 `Vue` 的编译系统才能正确渲染为真实的 `DOM`。
    - 字符串 → `AST` 树 → 虚拟 `DOM` → 真实 `DOM` → 渲染到 `#app`
 5. 应遵循 `Vue` 的规则，将子模板放入子组件中，以实现模板的复用和组合的强大功能。
 

src/components/NeonButton/styles.module.scss

@@ -27,22 +27,12 @@
 
   &::before {
     z-index: -2;
-    background: linear-gradient(
-      90deg,
-      #00fff3,
-      // 霓虹青色
-      #ff00c1,
-      // 霓虹粉
-      #00ff8f,
-      // 荧光绿
-      #9600ff,
-      // 紫罗兰
-      #00fff3 // 回到霓虹青色
-    );
+    background: linear-gradient(90deg, #00fff3 0%, #ff00c1 25%, #00ff8f 50%, #9600ff 75%, #00fff3 100%);
     background-size: 300%;
     filter: blur(5px);
     opacity: 0;
     transition: opacity 0.3s ease;
+    transform: translateZ(0);
   }
 
   &::after {
@@ -71,16 +61,10 @@
     background-position: 0% center;
     opacity: 0.8;
   }
-  25% {
-    opacity: 1;
-  }
   50% {
     background-position: -100% center;
     opacity: 1;
   }
-  75% {
-    opacity: 0.8;
-  }
   100% {
     background-position: -200% center;
     opacity: 0.8;

src/pages/categories.js

@@ -34,13 +34,16 @@ import {
 import styles from "./index.module.scss"
 
 import { SiTypescript } from 'react-icons/si'
+import { useIsMobile } from '../utils/deviceUtils'
 
 // CategoryCard 组件
 export default function Categories() {
+  const isMobileView = useIsMobile()
+
   return (
-    <div className={styles.categories}>
+    <div className={`${styles.categories} ${isMobileView ? styles.mobileCategories : ''}`}>
       {categoriesData.map((category, idx) => (
-        <div key={idx} className={styles.categoryCard}>
+        <div key={idx} className={`${styles.categoryCard} ${isMobileView ? styles.mobileCategoryCard : ''}`}>
           <h3 className={styles.categoryTitle} data-cn={category.title}>
             {category.enTitle}
           </h3>
@@ -52,7 +55,7 @@ export default function Categories() {
               >
                 <div className={styles.itemCard}>
                   <div className={styles.itemIcon}>
-                    {typeof item.icon === 'function' ? item.icon() : item.icon}
+                    {item.icon}
                   </div>
                   <span className={styles.itemName}>{item.name}</span>
                 </div>
@@ -108,7 +111,7 @@ const categoriesData = [
       { name: 'CSS', icon: <RiCss3Fill style={{ color: '#1572B6' }} />, path: '/docs-hub/Frontend/CSS/CSS-选择器-权重-匹配规则' },
       { name: 'DOM', icon: <RiWindowFill style={{ color: '#FFB800' }} />, path: '/docs-hub/Frontend/DOM/DOM初识-JS对象-XML-幻灯片案例展示' },
       { name: 'BOM', icon: <RiWindowFill style={{ color: '#FF8C00' }} />, path: '/docs-hub/Frontend/BOM/深入理解BOM' },
-      { name: 'Electron', icon: <RiComputerLine style={{ color: '#9FEAF9' }} />, path: '/docs-hub/Frontend/Electron/初识-基础' },
+      { name: 'Electron', icon: <RiComputerLine style={{ color: '#9FEAF9' }} />, path: '/docs-hub/Frontend/Electron/初��-基础' },
       { name: 'Quasar', icon: <FaAtom style={{ color: '#1976D2' }} />, path: '/docs-hub/Frontend/Quasar/Quasar项目搭建' },
     ]
   },

src/pages/index.module.scss

@@ -18,8 +18,8 @@ $font-body: 'Noto Sans SC', sans-serif;
   &::before {
     content: 'Sumingcheng';
     position: absolute;
-    right: 5%;
-    top: 50%;
+    right: -2%;
+    top: 40%;
     transform: translateY(-50%);
     font-size: 100px;
     font-weight: 900;
@@ -106,10 +106,13 @@ $font-body: 'Noto Sans SC', sans-serif;
   flex-direction: column;
   gap: 1.5rem;
   padding: 1rem;
+}
 
-  @media screen and (max-width: 768px) {
-    grid-template-columns: 1fr;
-  }
+// 移动端分类列表样式
+.mobileCategories {
+  padding: 0.5rem;
+  margin: 0;
+  width: 100%;
 }
 
 // 分类卡片
@@ -121,10 +124,20 @@ $font-body: 'Noto Sans SC', sans-serif;
   transition: $transition-normal;
   width: 100%;
   border: 2px solid var(--ifm-color-emphasis-200);
+}
 
-  &:hover {
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
-    border-color: var(--ifm-color-primary);
+// 移动端分类卡片样式
+.mobileCategoryCard {
+  margin: 0;
+  padding: 1rem;
+  border-radius: 0.5rem;
+  width: 100vw;
+  margin-left: -1rem;
+  margin-right: -1rem;
+
+  // 移除左右边距，确保完全占满
+  @media screen and (max-width: 768px) {
+    width: calc(100% + 2rem);
   }
 }
 
@@ -159,7 +172,13 @@ $font-body: 'Noto Sans SC', sans-serif;
   gap: 0.8rem;
 
   @media screen and (max-width: 768px) {
-    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
+    grid-template-columns: repeat(3, 1fr);
+    gap: 0.6rem;
+  }
+
+  @media screen and (max-width: 480px) {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 0.5rem;
   }
 }
 
@@ -178,7 +197,7 @@ $font-body: 'Noto Sans SC', sans-serif;
   border-radius: 8px;
   background: var(--ifm-background-surface-color);
   transition: $transition-fast;
-  border: 1px solid var(--ifm-color-emphasis-200);
+  border: 1.5px solid var(--ifm-color-emphasis-200);
   height: 100%;
 
   &:hover {
@@ -197,6 +216,19 @@ $font-body: 'Noto Sans SC', sans-serif;
       border-color: var(--ifm-color-primary);
     }
   }
+
+  @media screen and (max-width: 768px) {
+    padding: 0.8rem;
+
+    .itemIcon {
+      font-size: 1.2rem;
+      margin-bottom: 0.3rem;
+    }
+
+    .itemName {
+      font-size: 0.8rem;
+    }
+  }
 }
 
 // 项目名称

src/utils/deviceUtils.js

@@ -0,0 +1,20 @@
+import React from 'react'
+export const isMobile = () => {
+  if (typeof window === 'undefined') return false
+  return window.innerWidth <= 768
+}
+
+export const useIsMobile = () => {
+  const [isMobileView, setIsMobileView] = React.useState(isMobile())
+
+  React.useEffect(() => {
+    const handleResize = () => {
+      setIsMobileView(isMobile())
+    }
+
+    window.addEventListener('resize', handleResize)
+    return () => window.removeEventListener('resize', handleResize)
+  }, [])
+
+  return isMobileView
+}