文件结构、命名优化；

IFLOW描述文件更新；

App.vue

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

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` 已全局导入，可以在 `<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'`)。
+*   注释、结构规范应遵循项目中已有的风格。

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;
+  }
+}

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;
-}

common/styles/normal.scss

@@ -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;
-}

uni.scss

@@ -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;