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