yuantao/template-MP
Template
1
0
Fork 0
Code Issues Pull Requests Releases Activity

文件结构、命名优化；

Browse Source 
IFLOW描述文件更新；
This commit is contained in:
yuantao
2025-09-28 16:34:48 +08:00
parent 2a4232b695
commit 931fa1afd3
6 changed files with 158 additions and 577 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
App.vue
View File

@@ -10,7 +10,6 @@ export default {
</script>
<style lang="scss">
@import '@/common/styles/common.css';
@import '@/common/styles/normal.scss';
/* 注意要写在第一行，注意不能引入至uni.scss，同时给style标签加入lang="scss"属性 */
@import '@/common/styles/base.scss';
@import '@/uview-plus/index.scss';
</style>

34
IFLOW.md
View File

@@ -13,10 +13,13 @@
```
.
├── api/ # 接口相关
├── api/ # 接口相关
│ ├── modules/ # 业务接口
│ └── request.js # 请求封装
├── common/ # 公共资源
│ ├── styles/ # 全局样式
│ │ ├── common.css # codefun原子类样式
│ │ └── base.scss # 全局样式变量
│ └── utils/ # 工具函数
├── components/ # 公共组件
├── uni_modules/ # uni-app 组件
@@ -24,6 +27,7 @@
│ └── luch-request/ # luch-request 网络请求库
├── uview-plus/ # uView-Plus 组件库
├── mixins/ # Vue 混入
├── store/ # 状态管理
├── pages/ # 主包页面
├── subPages/ # 分包页面
├── App.vue # 应用入口
@@ -31,6 +35,7 @@
├── pages.json # 页面配置
├── manifest.json # 应用配置
├── uni.scss # 全局样式变量
├── vite.config.js # Vite 编译配置
└── .env # 环境变量
```
@@ -60,11 +65,26 @@ npm install
## 样式
* 全局样式文件位于 `common/styles/` 目录下，包括 `common.css` 和 `normal.scss`。
* 样式优先使用codefun原子类样式。
* 样式规范应遵循项目中已有的风格。
## JavaScript
* 严格遵循ES6规范。
* 遵循JavaScript函数式编程范式。
* 方法类函数应该使用 `function` 进行定义。
* 避免出现超过4个以上的 `ref`，超过4个则使用 `reactive`。
* 页面的生命周期按需进行导入，如(`import { onLoad } from '@dcloudio/uni-app'`)。
* 所有全局变量都集中放置于代码顶部。
* 所有变量都应该写有注释说明、类型说明。
* 所有的 `Promise` 方法使用 `async` `await` 写法，并进行容错处理。
* 所有的字符串拼接使用ES6的模板语法。
* JavaScript规范应遵循项目中已有的风格。
## 静态资源
* 所有静态资源需要使用环境变量 `VITE_ASSETSURL`。
* 静态资源变量 `ASSETSURL` 已全局导入，可以在 `<template></template>` 中直接使用。
* 所有静态资源URL应该使用 `ASSETSURL` 进行拼接，如：`${ASSETSURL}simple.png`。
## 工具函数 (tool.js)
@@ -80,15 +100,19 @@ npm install
* 网络请求使用 `lib/luch-request` 库进行封装。
* 全局配置在 `api/request.js` 中定义，包括基础URL、请求头、SSL验证等。
* 包含请求和响应拦截器，用于处理通用逻辑（如错误提示、鉴权等）。
* 各业务板块的接口都应存放在 `api/modules` 下，并将单个接口进行导出以便页面按需导入。
## 组件
* 项目集成了 `uView-Plus` 和 `z-paging` 两个组件库，组件均以全局导入，可以直接使用。
* 项目集成了 `uView-Plus` 和 `z-paging` 两个组件库，组件均已全局导入，可以直接使用。
* `uView-Plus` 组件的使用方式是 `u-icon`、`u-input`、`u-textarea`。
* 自定义组件应放在 `components/` 目录下。
* 全局组件放在 `components/` 目录下。
* 页面独立组件放在页面根目录下的 `components/`。
* 每个组件应该附带 `README.MD` 文档。
* 组件编写应遵循项目中已有的风格。
## 页面
* 页面配置在 `pages.json` 中管理。
* 主包页面放在 `pages/` 目录下，分包页面放在 `subPages/` 目录下。
* 页面的生命周期按需进行导入，如(`import { onLoad } from '@dcloudio/uni-app'`)。
* 注释、结构规范应遵循项目中已有的风格。

127
common/styles/base.scss Normal file
View File

@@ -0,0 +1,127 @@
// 定义内外边距，历遍1-40
@for $i from 0 through 40 {
// 只要双数和能被5除尽的数
@if $i % 2==0 or $i % 5==0 {
// 得出：u-margin-30或者u-m-30
.w-#{$i} {
width: calc($i * 1%) !important;
}
.p-x-#{$i} {
padding-left: $i + rpx !important;
padding-right: $i + rpx !important;
}
.p-y-#{$i} {
padding-top: $i + rpx !important;
padding-bottom: $i + rpx !important;
}
.m-x-#{$i} {
margin-left: $i + rpx !important;
margin-right: $i + rpx !important;
}
.m-y-#{$i} {
margin-top: $i + rpx !important;
margin-bottom: $i + rpx !important;
}
.m-#{$i} {
margin-left: $i + rpx !important;
margin-right: $i + rpx !important;
margin-top: $i + rpx !important;
margin-bottom: $i + rpx !important;
}
.p-#{$i} {
padding-left: $i + rpx !important;
padding-right: $i + rpx !important;
padding-top: $i + rpx !important;
padding-bottom: $i + rpx !important;
}
.m-l-#{$i} {
margin-left: $i + rpx !important;
}
.m-t-#{$i} {
margin-top: $i + rpx !important;
}
.m-r-#{$i} {
margin-right: $i + rpx !important;
}
.m-b-#{$i} {
margin-bottom: $i + rpx !important;
}
.p-l-#{$i} {
padding-left: $i + rpx !important;
}
.p-t-#{$i} {
padding-top: $i + rpx !important;
}
.p-r-#{$i} {
padding-right: $i + rpx !important;
}
.p-b-#{$i} {
padding-bottom: $i + rpx !important;
}
.l-p-#{$i} {
letter-spacing: $i + rpx !important;
}
.z-i-#{$i} {
z-index: $i;
}
.l-h-#{$i} {
line-height: $i + rpx !important;
}
.r-#{$i} {
right: $i + rpx !important;
}
.l-#{$i} {
left: $i + rpx !important;
}
.t-#{$i} {
top: $i + rpx !important;
}
.b-#{$i} {
bottom: $i + rpx !important;
}
}
}
// 定义字体(rpx)单位，大于或等于20的都为rpx单位字体
@for $i from 9 through 60 {
.font-#{$i} {
font-size: $i + rpx !important;
}
}
// 圆角
@for $i from 4 through 60 {
.rounded-#{$i} {
border-radius: $i + rpx;
}
}
// 多行文本溢出
@for $i from 1 through 5 {
.over-line-#{$i} {
width: 100%;
height: calc($i * 1em + 0.5em);
display: -webkit-box;
text-overflow: ellipsis;
-webkit-line-clamp: $i;
overflow: hidden;
-webkit-box-orient: vertical;
}
}

98
common/styles/common.css
View File

@@ -1,85 +1,3 @@
view,
text {
color: #333;
font-size: 24rpx;
box-sizing: border-box;
}
/* 2. 主背景色 */
.main-bg-color {
background-color: #fff;
}
/* 3. 主文字色 */
.main-color {
color: #005097;
}
.main-border-color {
border-color: #646464;
}
.w100 {
width: 100%;
}
.h100 {
height: 100vw;
}
button {
padding: 0;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
background-color: transparent;
}
button::after {
border: none;
}
.flex-sp {
display: flex;
align-items: center;
justify-content: space-between;
}
.tag {
padding: 6rpx 20rpx;
font-feature-settings: 'liga' off, 'clig' off;
font-family: 'Source Han Sans CN';
font-size: 26rpx;
}
.tag1 {
background: #d9ebff;
color: #005097;
}
.tag2 {
background: #ffefd9;
color: #972300;
}
.tag3 {
background: #ffe4d9;
color: #970000;
}
.tag4 {
background: #d9ffea;
color: #00972d;
}
/************************************************************
** 请将全局样式拷贝到项目的全局 CSS 文件或者当前页面的顶部 **
** 否则页面将无法正常显示 **
************************************************************/
html {
font-size: 16px;
}
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'Microsoft Yahei', sans-serif;
@@ -92,6 +10,7 @@ image,
text {
box-sizing: border-box;
flex-shrink: 0;
color: #333;
}
#app {
@@ -600,18 +519,3 @@ text {
.code-fun-mt-100 {
margin-top: 200rpx;
}
.head {
width: 750rpx;
height: 372rpx;
flex-shrink: 0;
position: absolute;
top: 0;
left: 0;
background: linear-gradient(180deg, #d4eaff 0%, #fff 65.32%);
}
.container {
width: 100vw;
height: 100vh;
background-image: linear-gradient(to bottom, #dff0ff 8%, white 15%);
overflow: hidden;
}

397
common/styles/normal.scss
View File

@@ -1,397 +0,0 @@
.underline-text {
text-decoration: underline;
text-underline-offset: 4rpx; /* 调整这个值可以改变下划线距离文字的间距 */
}
/* flex 布局 */
.flex {
/* #ifndef APP-PLUS-NVUE */
display: flex;
/* #endif */
flex-direction: row;
}
[class*='-container'] [class*='flex-'] {
display: flex;
}
[class*='-container'] [class*='-bet'] {
justify-content: space-between;
}
[class*='-container'] [class*='-cen'] {
justify-content: center;
}
[class*='-container'] [class*='-aro'] {
justify-content: space-around;
}
[class*='-container'] [class*='-eve'] {
justify-content: space-evenly;
}
[class*='-container'] [class*='-jfend'] {
justify-content: flex-end;
}
[class*='-container'] [class*='-ali'] {
align-items: center;
}
[class*='-container'] [class*='-bas'] {
align-items: baseline;
}
[class*='-container'] [class*='-end'] {
align-items: end;
}
[class*='-container'] [class*='-col'] {
flex-direction: column;
}
[class*='-container'] [class*='-row'] {
flex-direction: row;
}
[class*='-container'] [class*='-rowre'] {
flex-direction: row-reverse;
}
[class*='-container'] [class*='-wra'] {
flex-wrap: wrap;
}
[class*='-container'] [class*='-end'] {
justify-content: flex-end;
align-items: flex-end;
}
// 定义内外边距，历遍1-80
@for $i from 0 through 10 {
.flex-#{$i} {
flex: $i;
}
}
/* #ifndef APP-PLUS-NVUE */
.flex-shrink {
flex-shrink: 0;
}
/* #endif */
// 定义内外边距，历遍1-80
@for $i from 0 through 40 {
// 只要双数和能被5除尽的数
@if $i % 2==0 or $i % 5==0 {
// 得出：u-margin-30或者u-m-30
.w-#{$i} {
width: calc($i * 1%) !important;
}
.p-x-#{$i} {
padding-left: $i + rpx !important;
padding-right: $i + rpx !important;
}
.p-y-#{$i} {
padding-top: $i + rpx !important;
padding-bottom: $i + rpx !important;
}
.m-x-#{$i} {
margin-left: $i + rpx !important;
margin-right: $i + rpx !important;
}
.m-y-#{$i} {
margin-top: $i + rpx !important;
margin-bottom: $i + rpx !important;
}
.m-#{$i} {
margin-left: $i + rpx !important;
margin-right: $i + rpx !important;
margin-top: $i + rpx !important;
margin-bottom: $i + rpx !important;
}
.p-#{$i} {
padding-left: $i + rpx !important;
padding-right: $i + rpx !important;
padding-top: $i + rpx !important;
padding-bottom: $i + rpx !important;
}
.m-l-#{$i} {
margin-left: $i + rpx !important;
}
.m-t-#{$i} {
margin-top: $i + rpx !important;
}
.m-r-#{$i} {
margin-right: $i + rpx !important;
}
.m-b-#{$i} {
margin-bottom: $i + rpx !important;
}
.p-l-#{$i} {
padding-left: $i + rpx !important;
}
.p-t-#{$i} {
padding-top: $i + rpx !important;
}
.p-r-#{$i} {
padding-right: $i + rpx !important;
}
.p-b-#{$i} {
padding-bottom: $i + rpx !important;
}
.l-p-#{$i} {
letter-spacing: $i + rpx !important;
}
.z-i-#{$i} {
z-index: $i;
}
.l-h-#{$i} {
line-height: $i + rpx !important;
}
.r-#{$i} {
right: $i + rpx !important;
}
.l-#{$i} {
left: $i + rpx !important;
}
.t-#{$i} {
top: $i + rpx !important;
}
.b-#{$i} {
bottom: $i + rpx !important;
}
}
}
// 定义字体大小
// @for $i from 9 to 18 {
// .font-#{$i} {
// font-size: $i + px;
// }
// }
// 定义字体(rpx)单位，大于或等于20的都为rpx单位字体
@for $i from 9 through 60 {
.font-#{$i} {
font-size: $i + rpx !important;
}
}
// 圆角
@for $i from 4 through 60 {
.rounded-#{$i} {
border-radius: $i + rpx;
}
}
// 定义中文字体(rpx)间距
@for $i from 2 through 10 {
.l-p-#{$i} {
letter-spacing: $i + rpx;
}
.over-line-#{$i} {
width: 100%;
height: calc($i * 1em + 0.5em);
display: -webkit-box;
text-overflow: ellipsis;
-webkit-line-clamp: $i;
overflow: hidden;
-webkit-box-orient: vertical;
}
}
/* 内容溢出 */
.overflow-hidden {
overflow: hidden;
}
/* 文字缩进 */
/* #ifndef APP-PLUS-NVUE */
.text-indent {
text-indent: 2;
}
/* #endif */
/* 文字划线 */
.text-through {
text-decoration: line-through;
}
/* 文字对齐 */
.text-left {
text-align: left;
}
.text-right {
text-align: right;
}
.text-center {
text-align: center;
}
/* 文字换行溢出处理 */
.text-ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.text-ellipsis-2 {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; //多行在这里修改数字即可
overflow: hidden;
/* autoprefixer: ignore next */
-webkit-box-orient: vertical;
}
/* 文字粗细和斜体 */
.font-weight-light {
font-weight: 300;
}
/*细*/
.font-weight-lighter {
font-weight: 100;
}
/*更细*/
.font-weight-normal {
font-weight: 400;
}
/*正常*/
.font-weight-middle {
font-weight: 500;
}
/*正常*/
.font-weight-middles {
font-weight: 600;
}
/*正常*/
.font-weight-bold {
font-weight: 700;
}
/*粗*/
.font-weight-bolder {
font-weight: bold;
}
/*更粗*/
.font-italic {
font-style: italic;
}
/*斜体*/
/* 文字颜色 */
.text-body {
color: #333333;
}
// 边框
.border {
border-width: 2rpx;
border-style: solid;
border-color: #ececec;
}
.border-top {
border-top-width: 2rpx;
border-top-style: solid;
border-top-color: #ececec;
}
.border-right {
border-right-width: 2rpx;
border-right-style: solid;
border-right-color: #ececec;
}
.border-bottom {
border-bottom-width: 2rpx;
border-bottom-style: solid;
border-bottom-color: #9f9f9f;
}
.border-left {
border-left-width: 2rpx;
border-left-style: solid;
border-left-color: #ececec;
}
/* 定位 */
.position-relative {
position: relative;
}
.position-absolute {
position: absolute;
}
.position-fixed {
position: fixed;
}
/* 定位 - 固定顶部 */
.fixed-top {
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 1030;
}
/* 定位 - 固定底部 */
.fixed-bottom {
position: fixed;
right: 0;
bottom: 0;
left: 0;
z-index: 1030;
}
.top-0 {
top: 0;
}
.left-0 {
left: 0;
}
.right-0 {
right: 0;
}
.bottom-0 {
bottom: 0;
}
.font-family-B {
font-family: 'OPPOSans-B' !important;
}
:deep(.u-empty) {
height: 500rpx;
}

76
uni.scss
View File

@@ -1,76 +0,0 @@
/**
* 这里是uni-app内置的常用样式变量
*
* uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
* 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
*
*/
/**
* 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
*
* 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
*/
@import '@/uview-plus/theme.scss';
/* 颜色变量 */
/* 行为相关颜色 */
$uni-color-primary: #007aff;
$uni-color-success: #4cd964;
$uni-color-warning: #f0ad4e;
$uni-color-error: #dd524d;
/* 文字基本颜色 */
$uni-text-color:#333;//基本色
$uni-text-color-inverse:#fff;//反色
$uni-text-color-grey:#999;//辅助灰色，如加载更多的提示信息
$uni-text-color-placeholder: #808080;
$uni-text-color-disable:#c0c0c0;
/* 背景颜色 */
$uni-bg-color:#ffffff;
$uni-bg-color-grey:#f8f8f8;
$uni-bg-color-hover:#f1f1f1;//点击状态颜色
$uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色
/* 边框颜色 */
$uni-border-color:#c8c7cc;
/* 尺寸变量 */
/* 文字尺寸 */
$uni-font-size-sm:12px;
$uni-font-size-base:14px;
$uni-font-size-lg:16px;
/* 图片尺寸 */
$uni-img-size-sm:20px;
$uni-img-size-base:26px;
$uni-img-size-lg:40px;
/* Border Radius */
$uni-border-radius-sm: 2px;
$uni-border-radius-base: 3px;
$uni-border-radius-lg: 6px;
$uni-border-radius-circle: 50%;
/* 水平间距 */
$uni-spacing-row-sm: 5px;
$uni-spacing-row-base: 10px;
$uni-spacing-row-lg: 15px;
/* 垂直间距 */
$uni-spacing-col-sm: 4px;
$uni-spacing-col-base: 8px;
$uni-spacing-col-lg: 12px;
/* 透明度 */
$uni-opacity-disabled: 0.3; // 组件禁用态的透明度
/* 文章场景相关 */
$uni-color-title: #2C405A; // 文章标题颜色
$uni-font-size-title:20px;
$uni-color-subtitle: #555555; // 二级标题颜色
$uni-font-size-subtitle:26px;
$uni-color-paragraph: #3F536E; // 文章段落颜色
$uni-font-size-paragraph:15px;