diff --git a/App.vue b/App.vue
index 1744608..41cd31d 100644
--- a/App.vue
+++ b/App.vue
@@ -10,7 +10,6 @@ export default {
diff --git a/IFLOW.md b/IFLOW.md
index 8aaca33..30f8dc2 100644
--- a/IFLOW.md
+++ b/IFLOW.md
@@ -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` 已全局导入,可以在 `` 中直接使用。
+* 所有静态资源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'`)。
\ No newline at end of file
+* 注释、结构规范应遵循项目中已有的风格。
\ No newline at end of file
diff --git a/common/styles/base.scss b/common/styles/base.scss
new file mode 100644
index 0000000..4324136
--- /dev/null
+++ b/common/styles/base.scss
@@ -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;
+ }
+}
diff --git a/common/styles/common.css b/common/styles/common.css
index 7f09de3..e71b64d 100644
--- a/common/styles/common.css
+++ b/common/styles/common.css
@@ -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;
-}
diff --git a/common/styles/normal.scss b/common/styles/normal.scss
deleted file mode 100644
index c898b59..0000000
--- a/common/styles/normal.scss
+++ /dev/null
@@ -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;
-}
diff --git a/uni.scss b/uni.scss
deleted file mode 100644
index 60c5dad..0000000
--- a/uni.scss
+++ /dev/null
@@ -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;
\ No newline at end of file