WeUI-WXSS:微信官方小程序UI组件库深度解析
WeUI-WXSS是微信官方设计团队专门为微信小程序量身打造的基础样式库,承载着微信生态统一用户体验的重要使命。本文深度解析该组件库的设计理念、架构设计、核心特性和使用方法,涵盖其模块化的技术架构、系统化的设计语言体系、响应式设计特性以及完整的组件使用指南,帮助开发者全面掌握这一官方UI解决方案。
WeUI-WXSS项目概述与设计理念
WeUI-WXSS是微信官方设计团队专门为微信小程序量身打造的一套基础样式库,它承载着微信生态统一用户体验的重要使命。作为WeUI在小程序平台的实现,该项目不仅提供了丰富的UI组件,更体现了微信设计团队对移动端用户体验的深度思考。
项目定位与核心价值
WeUI-WXSS的核心定位是为开发者提供与微信原生视觉体验完全一致的基础样式解决方案。通过这套样式库,开发者可以快速构建出符合微信设计规范的小程序界面,确保用户在使用不同小程序时能够获得统一、熟悉的操作体验。
项目核心价值体现在:
- 视觉一致性:严格遵循微信设计语言,保持与微信客户端的高度统一
- 开发效率:提供开箱即用的组件样式,减少重复开发工作
- 体验优化:基于微信用户习惯进行深度优化,提升用户操作流畅度
- 多端适配:完美适配不同尺寸的移动设备,确保显示效果的一致性
技术架构与设计哲学
WeUI-WXSS采用模块化的架构设计,将样式系统分为基础层、组件层和工具层三个层次:
graph TB
A[WeUI-WXSS架构] --> B[基础层]
A --> C[组件层]
A --> D[工具层]
B --> B1[Reset样式]
B --> B2[变量系统]
B --> B3[Mixin函数]
C --> C1[基础组件]
C --> C2[表单组件]
C --> C3[反馈组件]
C --> C4[导航组件]
D --> D1[工具类]
D --> D2[动画效果]
D --> D3[无障碍支持]
设计原则体系
WeUI-WXSS的设计遵循一套完整的原则体系:
| 设计原则 | 具体体现 | 技术实现 |
|---|---|---|
| 一致性 | 视觉风格统一 | 统一的颜色变量、间距系统 |
| 可用性 | 操作体验流畅 | 合理的热区大小、反馈动画 |
| 可访问性 | 无障碍支持 | 高对比度、大字体适配 |
| 灵活性 | 多主题支持 | CSS变量、Dark Mode |
| 性能优化 | 轻量高效 | 按需引入、代码压缩 |
核心设计理念解析
1. 以用户为中心的设计思维
WeUI-WXSS的设计始终围绕微信用户的使用习惯展开。通过对微信数亿用户行为的分析,设计团队提炼出了一套符合用户心理模型的设计模式:
// 示例:基于用户习惯的按钮设计
.weui-btn {
min-width: 88px; // 符合手指点击的最小热区
height: 44px; // 标准操作控件高度
border-radius: 4px; // 适中的圆角,既现代又不失稳重
font-size: 17px; // 最佳阅读字号
line-height: 1.4; // 合适的行高确保可读性
}
2. 系统化的设计语言
项目建立了完整的设计语言系统,包括:
色彩系统:
// 主色调
@weuiColorPrimary: #07C160;
@weuiColorWarn: #FA5151;
// 中性色
@weuiTextTitle: rgba(0, 0, 0, 0.9);
@weuiTextDesc: rgba(0, 0, 0, 0.5);
@weuiTextTips: rgba(0, 0, 0, 0.3);
// 背景色
@weuiBgColorPrimary: #07C160;
@weuiBgColorDefault: #F7F7F7;
间距系统:
// 基于4px的间距系统
@weuiCellGapV: 16px; // 垂直间距
@weuiCellGapH: 16px; // 水平间距
@weuiCellsMarginTop: 16px;
3. 响应式与自适应设计
WeUI-WXSS采用先进的响应式设计策略,确保在不同设备上都能提供优秀的用户体验:
flowchart LR
A[设备检测] --> B[屏幕尺寸适配]
A --> C[像素密度适配]
A --> D[输入方式适配]
B --> B1[RPX单位系统]
B --> B2[断点响应]
C --> C1[2x/3x图片适配]
C --> C2[高DPI优化]
D --> D1[触摸热区优化]
D --> D2[手势操作支持]
4. 无障碍设计理念
项目高度重视无障碍访问能力,为视障用户、老年用户等特殊群体提供了完善的支持:
// 无障碍支持示例
.weui-btn:focus {
outline: 2px solid @weuiColorPrimary;
outline-offset: 2px;
}
// 大字号适配
@media (prefers-contrast: high) {
.weui-cell {
border-color: @weuiLineColorLight;
}
}
// 高对比度模式
@media (prefers-contrast: high) {
.weui-dialog {
background-color: #FFFFFF;
border: 2px solid #000000;
}
}
技术特色与创新点
1. 双模式支持体系
WeUI-WXSS创新性地提供了PX和RPX双模式支持,满足不同开发场景的需求:
| 模式 | 适用场景 | 特点 |
|---|---|---|
| PX模式 | 传统开发 | 固定像素,兼容性好 |
| RPX模式 | 响应式开发 | 自适应缩放,多端一致 |
2. 黑暗模式无缝切换
通过数据属性驱动的主题切换机制:
<view data-weui-theme="dark">
<!-- 组件自动适配黑暗模式 -->
<view class="weui-cell">内容</view>
</view>
3. 组件化CSS架构
采用BEM命名规范,确保样式的作用域清晰:
.weui-cell {} /* Block */
.weui-cell__hd {} /* Element */
.weui-cell__bd {} /* Element */
.weui-cell--access {} /* Modifier */
设计价值观体现
WeUI-WXSS的设计不仅仅是一套样式规则,更是微信设计团队价值观的体现:
克制美学:避免过度设计,保持界面的简洁和功能性 用户友好:每一个交互细节都经过精心打磨 技术前瞻:拥抱现代CSS特性,保持技术先进性 生态协同:与微信生态系统深度整合,形成完整闭环
通过这套设计理念,WeUI-WXSS成功地为微信小程序开发者提供了一个既美观又实用的样式解决方案,成为微信小程序开发生态中不可或缺的重要组成部分。
项目架构与目录结构分析
WeUI-WXSS作为微信官方设计团队出品的小程序UI组件库,其项目架构体现了高度模块化和可维护性的设计理念。通过深入分析其目录结构,我们可以清晰地了解这个组件库的组织方式和设计哲学。
源码组织结构
WeUI-WXSS采用典型的源码与构建产物分离的架构模式,主要分为src源码目录和dist构建输出目录:
flowchart TD
A[WeUI-WXSS项目根目录] --> B[src/ 源码目录]
A --> C[dist/ 构建产物目录]
A --> D[dist-rpx-mode/ rpx版本目录]
B --> E[style/ 样式文件]
B --> F[example/ 示例代码]
B --> G[libs/ 工具库]
B --> H[mixin/ 混入文件]
E --> I[base/ 基础样式]
E --> J[widget/ 组件样式]
E --> K[icon/ 图标样式]
核心目录详解
1. 样式系统架构
src/style/目录是整个组件库的核心,采用LESS预处理器构建,实现了高度模块化的样式系统:
| 目录/文件 | 功能描述 | 重要性 |
|---|---|---|
base/ |
基础样式和工具函数 | ⭐⭐⭐⭐⭐ |
widget/ |
组件样式模块 | ⭐⭐⭐⭐⭐ |
icon/ |
图标字体样式 | ⭐⭐⭐⭐ |
weui.less |
主入口文件 | ⭐⭐⭐⭐⭐ |
基础样式模块(base/)包含:
reset.less: 样式重置和规范化fn.less: LESS工具函数和混入variable.less: 全局变量定义a11y.less: 无障碍访问支持patch.less: 小程序兼容补丁
2. 组件模块化设计
组件样式采用原子化设计理念,每个组件都有独立的样式文件:
mindmap
root(组件样式架构)
(基础组件)
(按钮组件)
(weui-button.less)
(各种状态样式)
(单元格组件)
(weui-cell.less)
(滑动操作样式)
(表单组件)
(各种表单元素)
(布局组件)
(Flex布局)
(Grid网格)
(Panel面板)
(反馈组件)
(Toast提示)
(Dialog对话框)
(Loading加载)
(导航组件)
(Tab栏)
(Navbar导航栏)
(Steps步骤条)
3. 示例代码结构
src/example/目录提供了完整的组件使用示例,每个组件都包含:
.js文件:组件逻辑和交互.wxml文件:组件结构模板.less文件:组件样式示例
这种结构设计让开发者能够快速理解每个组件的使用方式。
构建系统分析
项目使用Gulp作为构建工具,配置在gulpfile.js中,主要构建流程包括:
// 简化的构建流程
gulp.task('build', function() {
return gulp.src('src/style/weui.less')
.pipe(less()) // 编译LESS
.pipe(postcss([autoprefixer()])) // 自动前缀
.pipe(cssnano()) // 压缩优化
.pipe(rename('weui.wxss')) // 重命名
.pipe(gulp.dest('dist/style/')); // 输出到dist
});
多版本支持架构
WeUI-WXSS支持两种单位模式:
| 版本类型 | 目录 | 单位系统 | 适用场景 |
|---|---|---|---|
| 标准版本 | dist/ |
px单位 | 传统布局 |
| Rpx版本 | dist-rpx-mode/ |
rpx单位 | 响应式布局 |
模块依赖关系
通过分析weui.less主文件,我们可以看到清晰的模块依赖关系:
graph LR
A[reset.less] --> B[theme/index.less]
B --> C[weui-icon.less]
C --> D[a11y.less]
D --> E[各种组件样式]
E --> F[patch.less]
这种依赖关系确保了样式的正确加载顺序和覆盖关系。
设计模式应用
WeUI-WXSS在架构设计中应用了多种设计模式:
- 模块化模式:每个组件都是独立的模块,便于维护和复用
- 单入口模式:通过
weui.less统一导入所有样式模块 - 配置化模式:使用变量文件管理颜色、尺寸等配置
- 混入模式:通过Mixin实现样式复用
文件命名规范
项目采用一致的命名约定:
- 组件文件:
weui-{组件名}/weui-{组件名}.less - 示例文件:
{组件名}/{组件名}.{扩展名} - 工具文件:使用描述性名称如
fn.less、variable.less
这种规范的目录结构和架构设计使得WeUI-WXSS不仅易于使用,更便于二次开发和定制化改造。每个目录和文件都有明确的职责划分,体现了微信团队在工程化方面的深厚积累。
核心特性与设计规范介绍
WeUI-WXSS作为微信官方设计团队为小程序量身打造的UI组件库,其核心特性与设计规范体现了微信生态系统的统一性和专业性。该库不仅提供了丰富的视觉组件,更重要的是建立了一套完整的设计语言体系,确保开发者能够快速构建出符合微信原生体验的小程序界面。
设计语言体系
WeUI-WXSS采用系统化的设计语言,通过CSS变量和LESS预处理器的强大功能,构建了一套完整的设计规范体系。整个设计语言围绕以下几个核心维度展开:
色彩系统
WeUI-WXSS的色彩系统采用CSS自定义属性(CSS Variables)实现,支持明暗两种主题模式。色彩变量命名遵循语义化原则:
| 变量类别 | 变量名 | 说明 | 默认值(明色主题) |
|---|---|---|---|
| 品牌色 | --weui-BRAND | 主品牌色 | #07C160 |
| 功能色 | --weui-RED | 警告/错误色 | #FA5151 |
| 背景色 | --weui-BG-0 ~ --weui-BG-5 | 多级背景色 | 从#FFFFFF到#F7F7F7 |
| 前景色 | --weui-FG-0 ~ --weui-FG-5 | 文本和图标颜色 | 从#000000到#B2B2B2 |
| 线条色 | --weui-LINE-COLOR | 分割线颜色 | rgba(0, 0, 0, 0.1) |
// 色彩变量定义示例
@weuiColorPrimary: var(--weui-BRAND);
@weuiColorWarn: var(--weui-RED);
@weuiBgColorDefault: var(--weui-BG-0);
@weuiTextColorTitle: var(--weui-FG-0);
@weuiLineColorLight: var(--weui-FG-3);
字体规范
字体系统采用分层设计,确保在不同设备上都能获得最佳的阅读体验:
// 字体变量定义
@weuiFontEN: system-ui, -apple-system, "Helvetica Neue";
@weuiFontCN: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei";
@weuiFontSans: sans-serif;
@weuiFontDefault: @weuiFontEN, @weuiFontSans;
字体使用采用fallback机制,优先使用系统默认字体,确保跨平台一致性。中英文分别采用不同的字体栈,中文优先使用苹方和微软雅黑,英文使用系统UI字体。
间距系统
WeUI-WXSS采用8px为基准的间距系统,所有组件的内外边距都基于这个基准:
graph TD
A[8px基准间距] --> B[组件内边距]
A --> C[组件外边距]
A --> D[元素间隔]
B --> E[Cell组件: 16px]
B --> F[Button组件: 16px]
C --> G[Cells容器: 8px]
D --> H[表单元素: 16px]
组件设计规范
按钮组件规范
按钮作为最常用的交互组件,WeUI-WXSS提供了完整的按钮状态和样式规范:
| 按钮类型 | 默认状态 | 激活状态 | 禁用状态 | 使用场景 |
|---|---|---|---|---|
| 主按钮 | 品牌绿色背景 | 深绿色背景 | 灰色背景 | 主要操作 |
| 默认按钮 | 浅灰色背景 | 中灰色背景 | 灰色背景 | 次要操作 |
| 警告按钮 | 红色背景 | 深红色背景 | 灰色背景 | 危险操作 |
| 文字按钮 | 品牌色文字 | 深品牌色文字 | 灰色文字 | 链接操作 |
// 按钮尺寸规范
@weuiBtnHeight: 48px;
@weuiBtnFontSize: 17px;
@weuiBtnBorderRadius: 8px;
@weuiBtnMiniHeight: 32px;
@weuiBtnMiniFontSize: 14px;
单元格组件规范
单元格(Cell)是列表型界面的核心组件,其设计规范包括:
flowchart TD
A[Cell组件] --> B[标准Cell]
A --> C[表单Cell]
A --> D[带图标Cell]
A --> E[带箭头Cell]
B --> F[高度: 56px]
B --> G[内边距: 16px]
B --> H[字体大小: 17px]
C --> I[标签宽度: 105px]
C --> J[输入框对齐]
响应式设计特性
WeUI-WXSS内置了完善的响应式设计支持,通过rpx单位和媒体查询实现跨设备适配:
rpx适配方案
库提供了完整的rpx版本,所有尺寸单位都转换为rpx,确保在不同屏幕尺寸下保持一致的视觉效果:
// px版本
.weui-cell {
height: 56px;
padding: 16px;
}
// rpx版本
.weui-cell {
height: 112rpx;
padding: 32rpx;
}
暗色主题支持
通过data-weui-theme属性实现明暗主题切换,所有颜色变量自动适配:
<view data-weui-theme="dark">
<!-- 暗色主题内容 -->
</view>
交互反馈规范
WeUI-WXSS遵循微信官方的交互设计原则,提供了标准的交互反馈模式:
加载状态
stateDiagram-v2
[*] --> 正常状态
正常状态 --> 加载中: 用户操作
加载中 --> 完成状态: 操作成功
加载中 --> 错误状态: 操作失败
完成状态 --> 正常状态: 自动返回
错误状态 --> 正常状态: 用户确认
动画效果
采用缓动函数和适中的持续时间,确保动画流畅自然:
// 动画变量定义
@weuiAnimationTimingFunction: cubic-bezier(0.1, 0.57, 0.1, 1);
@weuiAnimationDuration: 0.3s;
可访问性设计
WeUI-WXSS高度重视可访问性,确保所有用户都能正常使用:
- 颜色对比度符合WCAG 2.1 AA标准
- 支持键盘导航和屏幕阅读器
- 提供高对比度模式支持
- 语义化的HTML结构
通过这套完整的设计规范体系,WeUI-WXSS为小程序开发者提供了标准化、专业化的UI解决方案,确保开发出的应用既美观又符合微信生态的设计语言。
快速开始与基本使用方法
WeUI-WXSS作为微信官方设计团队出品的UI组件库,为微信小程序开发者提供了与微信原生视觉体验完全一致的基础样式解决方案。本节将详细介绍如何快速集成WeUI-WXSS到您的小程序项目中,并通过丰富的代码示例展示基本使用方法。
安装与引入方式
WeUI-WXSS提供了多种灵活的引入方式,开发者可以根据项目需求选择最适合的方案。
方式一:NPM安装(推荐)
npm install weui-wxss
安装完成后,在小程序的app.wxss文件中全局引入:
@import '/miniprogram_npm/weui-wxss/dist/style/weui.wxss';
方式二:直接下载使用
从官方仓库下载最新版本的WeUI-WXSS,将dist目录复制到您的小程序项目中,然后在需要使用的页面中引入:
@import '../../dist/style/weui.wxss';
方式三:CDN引入(适用于分包)
@import 'https://cdn.jsdelivr.net/npm/weui-wxss@2.6.12/dist/style/weui.wxss';
基础组件使用示例
按钮组件(Button)
按钮是交互中最常用的组件之一,WeUI提供了多种样式的按钮:
<!-- 主要按钮 -->
<view class="weui-btn weui-btn_primary">主要操作</view>
<!-- 默认按钮 -->
<view class="weui-btn weui-btn_default">次要操作</view>
<!-- 警告按钮 -->
<view class="weui-btn weui-btn_warn">警示操作</view>
<!-- 禁用状态按钮 -->
<view class="weui-btn weui-btn_disabled weui-btn_primary" disabled>禁用按钮</view>
<!-- 加载中按钮 -->
<view class="weui-btn weui-btn_primary weui-btn_loading">
<text class="weui-mask-loading"></text>加载中...
</view>
单元格组件(Cell)
单元格组件用于展示列表项信息,支持多种变体:
<!-- 基础单元格 -->
<view class="weui-cell">
<view class="weui-cell__bd">单元格</view>
<view class="weui-cell__ft">说明文字</view>
</view>
<!-- 带图标的单元格 -->
<view class="weui-cell weui-cell_access">
<view class="weui-cell__hd">
<image src="icon.png" class="weui-cell__icon"></image>
</view>
<view class="weui-cell__bd">带图标的单元格</view>
<view class="weui-cell__ft weui-cell__ft_in-access"></view>
</view>
<!-- 表单单元格 -->
<view class="weui-cell weui-cell_input">
<view class="weui-cell__hd">
<view class="weui-label">姓名</view>
</view>
<view class="weui-cell__bd">
<input class="weui-input" placeholder="请输入姓名"/>
</view>
</view>
弹窗组件(Dialog)
弹窗组件用于显示重要的提示信息或操作确认:
<!-- 基础弹窗 -->
<view class="weui-dialog">
<view class="weui-dialog__hd">
<view class="weui-dialog__title">提示</view>
</view>
<view class="weui-dialog__bd">确定要执行此操作吗?</view>
<view class="weui-dialog__ft">
<view class="weui-dialog__btn weui-dialog__btn_default">取消</view>
<view class="weui-dialog__btn weui-dialog__btn_primary">确定</view>
</view>
</view>
主题切换功能
WeUI-WXSS支持黑暗模式,只需在根元素添加data-weui-theme属性:
<view data-weui-theme="dark">
<!-- 页面内容 -->
<view class="weui-btn weui-btn_primary">黑暗模式按钮</view>
</view>
也可以通过JavaScript动态切换主题:
Page({
data: {
theme: 'light'
},
switchTheme() {
const newTheme = this.data.theme === 'light' ? 'dark' : 'light';
this.setData({ theme: newTheme });
}
})
<view data-weui-theme="{{theme}}">
<view class="weui-btn weui-btn_primary" bindtap="switchTheme">
{{theme === 'light' ? '切换黑暗模式' : '切换明亮模式'}}
</view>
</view>
响应式布局组件
WeUI提供了灵活的布局组件,帮助开发者构建响应式界面:
<!-- Flex布局 -->
<view class="weui-flex">
<view class="weui-flex__item">弹性项1</view>
<view class="weui-flex__item">弹性项2</view>
<view class="weui-flex__item">弹性项3</view>
</view>
<!-- 网格布局 -->
<view class="weui-grids">
<view class="weui-grid" wx:for="{{9}}" wx:key="index">
<image class="weui-grid__icon" src="/images/icon_tabbar.png"/>
<view class="weui-grid__label">功能{{index + 1}}</view>
</view>
</view>
表单组件集成
WeUI的表单组件与小程序原生表单完美结合:
<form bindsubmit="formSubmit">
<!-- 输入框 -->
<view class="weui-cells weui-cells_after-title">
<view class="weui-cell weui-cell_input">
<view class="weui-cell__hd">
<view class="weui-label">用户名</view>
</view>
<view class="weui-cell__bd">
<input name="username" class="weui-input" placeholder="请输入用户名"/>
</view>
</view>
</view>
<!-- 单选框 -->
<view class="weui-cells weui-cells_after-title">
<view class="weui-cell weui-cell_input">
<view class="weui-cell__hd">
<view class="weui-label">性别</view>
</view>
<view class="weui-cell__bd weui-cell__bd_radio">
<radio-group name="gender">
<label class="weui-cell weui-check__label">
<radio value="male" class="weui-check"/>男
</label>
<label class="weui-cell weui-check__label">
<radio value="female" class="weui-check"/>女
</label>
</radio-group>
</view>
</view>
</view>
<!-- 提交按钮 -->
<view class="weui-btn-area">
<button class="weui-btn weui-btn_primary" form-type="submit">提交</button>
</view>
</form>
自定义样式覆盖
如果需要自定义WeUI组件的样式,可以通过CSS变量或直接覆盖的方式:
/* 通过CSS变量自定义主题色 */
:root {
--weui-BRAND: #007aff; /* 品牌色 */
--weui-TEXTGREEN: #07c160; /* 成功色 */
--weui-WARN: #fa5151; /* 警告色 */
}
/* 直接覆盖样式 */
.weui-btn_primary {
background-color: your-custom-color;
border-radius: 12rpx;
}
/* 使用important确保优先级 */
.weui-cell {
padding: 32rpx !important;
}
组件使用流程图
以下是使用WeUI-WXSS组件的基本流程:
flowchart TD
A[选择引入方式] --> B{NPM安装}
A --> C[直接下载]
A --> D[CDN引入]
B --> E[在app.wxss中全局引入]
C --> F[在页面中局部引入]
D --> G[通过CDN链接引入]
E --> H[使用组件class]
F --> H
G --> H
H --> I[自定义样式<br>(可选)]
I --> J[主题切换<br>(可选)]
J --> K[完成集成]
通过上述介绍,您已经掌握了WeUI-WXSS的基本使用方法。这个官方UI组件库不仅提供了丰富的组件样式,还保持了与微信原生体验的高度一致性,能够显著提升小程序的开发效率和用户体验。
WeUI-WXSS作为微信官方出品的小程序UI组件库,通过系统化的设计语言、模块化的架构设计和丰富的组件生态,为开发者提供了与微信原生体验高度一致的解决方案。其核心价值体现在视觉一致性、开发效率提升、体验优化和多端适配能力上。通过本文的深度解析,开发者可以全面掌握WeUI-WXSS的设计理念、技术架构和使用方法,从而快速构建出符合微信设计规范的优质小程序应用,提升开发效率和用户体验。
kernelopenEuler内核是openEuler操作系统的核心,既是系统性能与稳定性的基石,也是连接处理器、设备与服务的桥梁。C092
baihu-dataset异构数据集“白虎”正式开源——首批开放10w+条真实机器人动作数据,构建具身智能标准化训练基座。00
mindquantumMindQuantum is a general software library supporting the development of applications for quantum computation.Python058
PaddleOCR-VLPaddleOCR-VL 是一款顶尖且资源高效的文档解析专用模型。其核心组件为 PaddleOCR-VL-0.9B,这是一款精简却功能强大的视觉语言模型(VLM)。该模型融合了 NaViT 风格的动态分辨率视觉编码器与 ERNIE-4.5-0.3B 语言模型,可实现精准的元素识别。Python00
GLM-4.7GLM-4.7上线并开源。新版本面向Coding场景强化了编码能力、长程任务规划与工具协同,并在多项主流公开基准测试中取得开源模型中的领先表现。 目前,GLM-4.7已通过BigModel.cn提供API,并在z.ai全栈开发模式中上线Skills模块,支持多模态任务的统一规划与协作。Jinja00
AgentCPM-Explore没有万亿参数的算力堆砌,没有百万级数据的暴力灌入,清华大学自然语言处理实验室、中国人民大学、面壁智能与 OpenBMB 开源社区联合研发的 AgentCPM-Explore 智能体模型基于仅 4B 参数的模型,在深度探索类任务上取得同尺寸模型 SOTA、越级赶上甚至超越 8B 级 SOTA 模型、比肩部分 30B 级以上和闭源大模型的效果,真正让大模型的长程任务处理能力有望部署于端侧。Jinja00