开发ing

网络，状态管理封装。登录与退出登录流程完成

.env

@@ -1 +0,0 @@
-API_BASE_URL = 'http://localhost:8089'

.env.development

@@ -0,0 +1 @@
+ VUE_APP_BASE_URL = 'https://starify-api-test.matchexpo.cn'

.env.production

@@ -0,0 +1 @@
+ VUE_APP_BASE_URL = 'https://starify-api-test.matchexpo.cn'

.gitignore

@@ -1,7 +1,9 @@
 .DS_Store
 node_modules/
 unpackage/
-dist/
+dist/build
+dist/cache
+dist/dev
 
 # local env files
 .env.local

.hbuilderx/launch.json

@@ -2,6 +2,7 @@
     "version" : "1.0",
     "configurations" : [
         {
+            "customPlaygroundType" : "local",
             "playground" : "custom",
             "type" : "uni-app:app-android"
         }

README.md

@@ -1,19 +1,18 @@
-# my-project
+# starify-app 星光移动端APP
 
-## Project setup
+## 项目启动
+### 命令行
 ```
 yarn install
 ```
 
-### Compiles and hot-reloads for development
 ```
 yarn serve
 ```
 
-### Compiles and minifies for production
 ```
 yarn build
 ```
+### HBuilder X
+直接启动没什么好说的
 
-### Customize configuration
-See [Configuration Reference](https://cli.vuejs.org/config/).

package.json

@@ -74,7 +74,8 @@
     "core-js": "^3.8.3",
     "flyio": "^0.6.2",
     "vue": ">= 2.6.14 < 2.7",
-    "vuex": "^3.2.0"
+    "vuex": "^3.2.0",
+    "vuex-persistedstate": "^4.1.0"
   },
   "devDependencies": {
     "@dcloudio/types": "^3.3.2",

src/App.vue

@@ -13,5 +13,22 @@
 </script>
 
 <style>
-	/*每个页面公共css */
+	@import "@/static/fonts/iconfont.css";
+	.body {
+		.state-bar{
+			height: var(--status-bar-height);
+		}
+		.head{
+			padding: 24rpx;
+			display: grid;
+			grid-template-columns: 1fr 2fr 1fr;
+			.title{
+				text-align: center;
+				font-weight: 600;
+			}
+		}
+		box-sizing: border-box;
+		height: 100vh;
+		background-color: #EDEDED;
+	}
 </style>

src/api/index.js

@@ -1,23 +1,150 @@
-// 位于根目录的.env内
-const baseUrl = process.env.API_BASE_URL
+let baseUrl = process.env. VUE_APP_BASE_URL
+import store from '@/store/index.js'
 /**
- * GET请求
- * @param {String} url 接口url
- * @param {Object} data 携带参数
- * @return {Promise} 一个promise
+ * 请求前置方法，可拦截请求
+ * @param {Object} data 请求数据
  */
-export const get = option => {
-  return new Promise((resolve, reject) => {
-        uni.request({
-            url: baseUrl + options.url,
-            method: 'GET',
-            data: options.data,
-            success: res => {
-                resolve(res.data)
-            },
-            fail:error=>{
-               reject(error)
-            }
-        })
-    })
+function before(data){
+	let option = data
+	let header = {}
+	//带入token
+	if(store.getters.token){
+		header.authorization = store.getters.token
+	}
+	//带入baseurl
+	option.url = baseUrl + option.url
+	return {
+		...option,
+		header,
+		allow: true //是否允许
+	}
+}
+
+/**
+ * 请求后置方法
+ * @param {Object} data 返回数据
+ * @param {Object} resolve
+ */
+function after(data, resolve){
+	let res = data
+	
+	
+	
+	resolve(res.data)
+}
+
+/**
+ * 请求后置方法(出错时)
+ * @param {Object} data 返回的数据
+ * @param {Object} reject
+ */
+function error(data, reject){
+	let err= data
+	
+
+	
+	reject(err)
+}
+
+/**
+ * 普通请求
+ * @param {Object} data 发起请求的数据结构，详见https://uniapp.dcloud.net.cn/api/request/request.html
+ */
+export const request = (data) => {
+	let option = before(data)
+	if(option.allow){
+		return new Promise((resolve, reject) => {
+			uni.request({
+				...option,
+				success: (res) => {
+					after(res, resolve)
+				},
+				fail: (err) => {
+					error(err, reject)
+				}
+			})
+		})
+	}else{
+		return new Promise((resolve, reject) => {
+			reject(option)
+		})
+	}
+}
+
+/**
+ * 请求体中带有文件的请求
+ * @param {Object} data 发起请求的数据结构，详见https://uniapp.dcloud.net.cn/api/request/network-file.html
+ * @param {Object} data.formData 参数放这里！！，不是data里！！
+ */
+export const formdata = (data) => {
+	let option = before(data)
+	if(option.allow){
+		return new Promise((resolve, reject) => {
+			uni.uploadFile({
+				filePath:'formdata',
+				name:'formdata',
+				...option,
+				success: (res) => {
+					after(res, resolve)
+				},
+				fail: (err) => {
+					error(err, reject)
+				}
+			})
+		})
+	}else{
+		return new Promise((resolve, reject) => {
+			reject(option)
+		})
+	}
+}
+
+/**
+ * 文件上传请求
+ * @param {Object} data 发起请求的数据结构，详见https://uniapp.dcloud.net.cn/api/request/network-file.html
+ */
+export const upload = (data) => {
+	let option = before(data)
+	if(option.allow){
+		return new Promise((resolve, reject) => {
+			uni.uploadFile({
+				...option,
+				success: (res) => {
+					after(res, resolve)
+				},
+				fail: (err) => {
+					error(err, reject)
+				}
+			})
+		})
+	}else{
+		return new Promise((resolve, reject) => {
+			reject(option)
+		})
+	}
+}
+
+/**
+ * 文件下载请求
+ * @param {Object} data 发起请求的数据结构，详见https://uniapp.dcloud.net.cn/api/request/network-file.html
+ */
+export const download = (data) => {
+	let option = before(data)
+	if(option.allow){
+		return new Promise((resolve, reject) => {
+			uni.downloadFile({
+				...option,
+				success: (res) => {
+					after(res, resolve)
+				},
+				fail: (err) => {
+					error(err, reject)
+				}
+			})
+		})
+	}else{
+		return new Promise((resolve, reject) => {
+			reject(option)
+		})
+	}
 }

src/api/user.js

@@ -1 +1,26 @@
-import { get } from '@/api/index.js'
+import { request } from '@/api/index.js'
+
+/**
+ * 用户登录接口
+ * @param {String} username 用户名
+ * @param {String} password 密码
+ */
+export function login(username,password){
+	return request({
+		url: '/api/user/login',
+		method: 'POST',
+		data: {
+			username,
+			password
+		}
+	})
+}
+/**
+ * 获取用户信息接口
+ */
+export function userinfo(){
+	return request({
+		url: '/api/user/info',
+		method: 'POST'
+	})
+}

src/main.js

@@ -1,6 +1,6 @@
 import Vue from 'vue'
 import App from './App'
-import store from './store'
+import store from './store/index.js'
 import './uni.promisify.adaptor'
 Vue.config.productionTip = false
 

src/pages.json

@@ -1,16 +1,85 @@
 {
+	
+	"tabBar": {
+		"backgroundColor": "#F7F7F7",
+		"selectedColor": "#F09649",
+		"color": "#444444",
+		"height": "65px",
+		"fontSize": "12px",
+		"iconWidth": "26px",
+		"borderStyle": "white",
+		"list": [
+			{
+				"pagePath": "pages/index/index",
+				"text": "星光",
+				"iconPath": "/static/tab-icon/home.png",
+				"selectedIconPath": "/static/tab-icon/home-active.png"
+			},
+			{
+				"pagePath": "pages/client/client",
+				"text": "线索",
+				"iconPath": "/static/tab-icon/client.png",
+				"selectedIconPath": "/static/tab-icon/client-active.png"
+			},
+			{
+				"pagePath": "pages/chat/chat",
+				"text": "聊天",
+				"iconPath": "/static/tab-icon/chat.png",
+				"selectedIconPath": "/static/tab-icon/chat-active.png"
+			},
+			{
+				"pagePath": "pages/user/me",
+				"text": "我的",
+				"iconPath": "/static/tab-icon/user.png",
+				"selectedIconPath": "/static/tab-icon/user-active.png"
+			}
+		]
+		
+	},
 	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
 		{
 			"path": "pages/index/index",
 			"style": {
-				"navigationBarTitleText": "uni-app"
+				"navigationBarTitleText": "星光",
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/chat/chat",
+			"style": {
+				"navigationBarTitleText": "聊天",
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/client/client",
+			"style": {
+				"navigationBarTitleText": "线索",
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/user/me",
+			"style": {
+				"navigationBarTitleText": "我的",
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/user/login",
+			"style": {
+				"navigationBarTitleText": "登录"
 			}
 		}
 	],
 	"globalStyle": {
 		"navigationBarTextStyle": "black",
 		"navigationBarTitleText": "uni-app",
-		"navigationBarBackgroundColor": "#F8F8F8",
-		"backgroundColor": "#F8F8F8"
+		"navigationBarBackgroundColor": "#FFFFFF",
+		"backgroundColor": "#F8F8F8",
+		"app-plus": {
+			"softinputMode": "adjustResize",
+			"bounce": "none"
+		}
 	}
 }

src/pages/chat/chat.vue

@@ -0,0 +1,24 @@
+<template>
+	<view class="body">
+		<view class="state-bar"></view>
+		<view class="head">
+			<view class="left"></view>
+			<view class="center title">聊天</view>
+			<view class="right"></view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			};
+		}
+	}
+</script>
+
+<style>
+
+</style>

src/pages/client/client.vue

@@ -0,0 +1,24 @@
+<template>
+	<view class="body">
+		<view class="state-bar"></view>
+		<view class="head">
+			<view class="left"></view>
+			<view class="center title">线索</view>
+			<view class="right"></view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			};
+		}
+	}
+</script>
+
+<style>
+
+</style>

src/pages/index/index.vue

@@ -1,14 +1,16 @@
 <template>
-	<view class="content">
-		<image class="logo" src="/static/logo.png"></image>
-		<view>
-			<text class="title">{{username}}</text>
+	<view class="body">
+		<view class="state-bar"></view>
+		<view class="head">
+			<view class="left"></view>
+			<view class="center title">星光</view>
+			<view class="right"></view>
 		</view>
 	</view>
 </template>
 
 <script>
-	import { mapState } from 'vuex';
+	import { login } from '@/api/user';
 	export default {
 		data() {
 			return {
@@ -19,37 +21,14 @@
 
 		},
 		methods: {
-
+		
 		},
 		computed: {
-			...mapState({
-				username: state => state.user.name
-			})
+			
 		}
 	}
 </script>
 
 <style>
-	.content {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		justify-content: center;
-	}
-
-	.logo {
-		height: 200rpx;
-		width: 200rpx;
-		margin: 200rpx auto 50rpx auto;
-	}
 
-	.text-area {
-		display: flex;
-		justify-content: center;
-	}
-
-	.title {
-		font-size: 36rpx;
-		color: #8f8f94;
-	}
 </style>

src/pages/user/login.vue

@@ -0,0 +1,101 @@
+<template>
+	<view class="body">
+		<image src="/static/tab-icon/Starify.png" class="title"/>
+		<input type="email" v-model="username" placeholder="输入用户名/手机号/邮箱" class="input"/>
+		<input type="safe-password" v-model="password" placeholder="输入登录密码" class="input"/>
+		<view class="find-password">
+			<navigator class="text">找回密码</navigator>
+		</view>
+		<view @click="agree=true" class="agree-radio">
+			<radio color="#F09649" class="radio" :checked="agree" />
+			<view>我已阅读并同意<navigator class="link">我不会看的用户条款</navigator>。</view>
+		</view>
+		<button @tap="userLogin()" :class="['button',(username&&password&&agree)?'':'disable']">登录</button>
+	</view>
+</template>
+
+<script>
+	import { login, userinfo } from '@/api/user.js'
+	export default {
+		data() {
+			return {
+				username: '',
+				password: '',
+				agree: false
+			};
+		},
+		methods: {
+			/**
+			 * 账号密码登录
+			 */
+			userLogin(){
+				if(this.username&&this.password&&this.agree){
+					login(this.username,this.password).then(res=>{
+						console.log(res)
+						this.$store.commit('setUserInfo',{
+							username: res.username,
+							nickname: res.nick_name,
+							belongUserId: res.belong_user_id,
+							isChildUser: res.is_child_user,
+							token: res.token
+						})
+						this.$store.commit('asyncUserInfo')
+						uni.navigateBack({
+							delta: 1
+						})
+					}).catch(err=>{
+						console.log(err)
+					})
+				}
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.body{
+		padding: 80rpx 40rpx;
+		background-color: white;
+		.title{
+			margin-bottom: 90rpx;
+			width: 460rpx;
+			height: 120rpx;
+		}
+		.input{
+			margin-top: 36rpx;
+			padding: 28rpx 16rpx;
+			border-bottom: 1rpx solid #969696; 
+		}
+		.find-password{
+			margin-top: 30rpx;
+			display: flex;
+			justify-content: flex-end;
+			.text{
+				font-size: 26rpx;
+				color: #adadad;
+			}
+		}
+		.agree-radio{
+			margin-top: 50rpx;
+			display: flex;
+			gap: 2rpx;
+			font-size: 26rpx;
+			align-items: center;
+			.radio{
+				scale: 0.8;
+			}
+			.link{
+				display: inline;
+				color: #F09649;
+			}
+		}
+		.button{
+			margin-top: 40rpx;
+			background-color: #F09649;
+			color: white;
+			&.disable{
+				background-color: #bababa;
+			}
+		}
+	}
+</style>

src/pages/user/me.vue

@@ -0,0 +1,118 @@
+<template>
+	<scroll-view scroll-y="true" class="body">
+		<view class="user-info">
+			<view class="state-bar"></view>
+			<view class="avatar-name">
+				<image class="avatar"></image>
+				<view v-if="userInfo.token" class="text">
+					<view class="nick-name">{{userInfo.nickname}}</view>
+					<view class="account">{{userInfo.username}}</view>
+				</view>
+				<view v-else class="text">
+					<navigator url="/pages/user/login" class="nick-name">登录解锁更多功能</navigator>
+					<navigator url="/pages/user/login" class="account">点击登录</navigator>
+				</view>
+			</view>
+		</view>
+		<view v-if="userInfo.token" class="menu-group">
+			<view class="menu-item"><text>偏好设置</text><text class="iconfont">&#xe63a;</text></view>
+			<view class="menu-item"><text>企业信息</text><text class="iconfont">&#xe63a;</text></view>
+			<view class="menu-item"><text>套餐额度</text><text class="iconfont">&#xe63a;</text></view>
+			<view class="menu-item"><text>消费记录</text><text class="iconfont">&#xe63a;</text></view>
+			<view class="menu-item"><text>设备管理</text><text class="iconfont">&#xe63a;</text></view>
+			<view class="menu-item"><text>账号托管</text><text class="iconfont">&#xe63a;</text></view>
+			<view class="menu-item"><text>修改密码</text><text class="iconfont">&#xe63a;</text></view>
+		</view>
+		<view v-if="userInfo.token" class="menu-group">
+			<view @tap="userLogout()" class="menu-item"><text>退出登录</text><text class="iconfont">&#xe63a;</text></view>
+		</view>
+	</scroll-view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			};
+		},
+		methods: {
+			/**
+			 * 退出登录
+			 */
+			userLogout(){
+				uni.showModal({
+					title: '退出登录',
+					content: '确实要登出这个账号吗？',
+					success: (res) => {
+						if(res.confirm){
+							this.$store.commit('logout')
+						}
+					}
+				})
+				
+			}
+		},
+		computed: {
+			userInfo() {
+				return this.$store.getters.userInfo
+			}
+		}
+	}
+</script>
+
+<style scoped>
+.body{
+	.menu-group{
+		/* box-shadow: 0 0 6rpx 0 #00000011; */
+		margin-top: 24rpx;
+		.menu-item{
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			background-color: white;
+			padding: 36rpx 48rpx;
+			.iconfont{
+				color: #949494;
+				font-size: 28rpx;
+			}
+			&:active{
+				background-color: #f6f6f6;
+			}
+			&:not(:last-child){
+				border-bottom: 1rpx solid #f0f0f0;
+			}
+		}
+	}
+	.user-info{
+		/* box-shadow: 0 0 6rpx 0 #00000011; */
+		padding: 160rpx 48rpx 48rpx;
+		background-color: white;
+		.avatar-name{
+			display: grid;
+			grid-template-columns: auto 1fr;
+			grid-gap: 20px;
+			.avatar{
+				border-radius: 16rpx;
+				background-color: #eeeeee;
+				width: 130rpx;
+				height: 130rpx;
+			}
+			.text{
+				display: flex;
+				flex-direction: column;
+				justify-content: space-between;
+				padding: 8rpx 0;
+				.nick-name{
+					font-weight: 600;
+					font-size: 38rpx;
+				}
+				.account{
+					font-size: 30rpx;
+					color: #767676;
+				}
+			}
+		}
+	}
+}
+</style>

src/static/fonts/iconfont.css

@@ -0,0 +1,19 @@
+@font-face {
+  font-family: "iconfont"; /* Project id 5091321 */
+  src: url('~@/static/fonts/iconfont.woff2') format('woff2'),
+       url('~@/static/fonts/iconfont.woff') format('woff'),
+       url('~@/static/fonts/iconfont.ttf') format('truetype');
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-right:before {
+  content: "\e63a";
+}
+

src/store/index.js

@@ -1,5 +1,6 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
+import createPersistedState from "vuex-persistedstate";
 Vue.use(Vuex)
 // 引入子状态
 import user from './modules/user.js'
@@ -8,5 +9,16 @@ Vue.use(Vuex)
 export default new Vuex.Store({
 	modules: {
 		user
-	}
+	},
+	plugins: [
+		createPersistedState({
+			// 持久化的数据↓
+			paths: ['user.userInfo'],
+			storage: {
+				getItem: (key) => uni.getStorageSync(key),
+				setItem: (key, value) => uni.setStorageSync(key, value),
+				removeItem: (key) => uni.removeStorageSync(key)
+			}
+		})
+	]
 })

src/store/modules/user.js

@@ -1,13 +1,56 @@
 // 用户的状态
+import { userinfo } from "@/api/user"
 export default {
 	state: {
-		name: 'foo'
+		userInfo: {
+			username: '',
+			nickname: '',
+			belongUserId: '',
+			isChildUser: false,
+			token: ''
+		}
 	},
 	getters: {
-		
+		userInfo: state => {
+			return state.userInfo
+		},
+		token: state => {
+			return state.userInfo.token
+		},
 	},
 	mutations: {
-		
+		/**
+		 * 更新用户信息状态
+		 * @param {Object} state
+		 * @param {Object} userInfo
+		 * @param {String} userInfo.username
+		 * @param {String} userInfo.nikename
+		 * @param {String} userInfo.belongUserId
+		 * @param {String} userInfo.isChildUser
+		 * @param {String} userInfo.token
+		 */
+		setUserInfo(state,userInfo){
+			state.userInfo = {
+				...state.userInfo,
+				...userInfo
+			}
+		},
+		/**
+		 * 使用当前token刷新用户信息
+		 * @param {Object} state
+		 */
+		asyncUserInfo(state){
+			userinfo().then(res=>{
+				console.log(res)
+			})
+		},
+		/**
+		 * 退出登录
+		 * @param {Object} state
+		 */
+		logout(state){
+			state.userInfo = {}
+		}
 	},
 	actions: {
 		

src/uni.scss

@@ -28,7 +28,7 @@ $uni-text-color-placeholder: #808080;
 $uni-text-color-disable: #c0c0c0;
 
 /* 背景颜色 */
-$uni-bg-color: #fff;
+$uni-bg-color: #f5f5f5;
 $uni-bg-color-grey: #f8f8f8;
 $uni-bg-color-hover: #f1f1f1; // 点击状态颜色
 $uni-bg-color-mask: rgba(0, 0, 0, 0.4); // 遮罩颜色

src/uni_modules/uni-scss/changelog.md

@@ -0,0 +1,8 @@
+## 1.0.3（2022-01-21）
+- 优化 组件示例
+## 1.0.2（2021-11-22）
+- 修复 / 符号在 vue 不同版本兼容问题引起的报错问题
+## 1.0.1（2021-11-22）
+- 修复 vue3中scss语法兼容问题
+## 1.0.0（2021-11-18）
+- init

src/uni_modules/uni-scss/index.scss

@@ -0,0 +1 @@
+@import './styles/index.scss';

src/uni_modules/uni-scss/package.json

@@ -0,0 +1,82 @@
+{
+  "id": "uni-scss",
+  "displayName": "uni-scss 辅助样式",
+  "version": "1.0.3",
+  "description": "uni-sass是uni-ui提供的一套全局样式 ，通过一些简单的类名和sass变量，实现简单的页面布局操作，比如颜色、边距、圆角等。",
+  "keywords": [
+    "uni-scss",
+    "uni-ui",
+    "辅助样式"
+],
+  "repository": "https://github.com/dcloudio/uni-ui",
+  "engines": {
+    "HBuilderX": "^3.1.0"
+  },
+  "dcloudext": {
+    "category": [
+        "JS SDK",
+        "通用 SDK"
+    ],
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
+  },
+  "uni_modules": {
+    "dependencies": [],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y"
+      },
+      "client": {
+        "App": {
+          "app-vue": "y",
+          "app-nvue": "u"
+        },
+        "H5-mobile": {
+          "Safari": "y",
+          "Android Browser": "y",
+          "微信浏览器(Android)": "y",
+          "QQ浏览器(Android)": "y"
+        },
+        "H5-pc": {
+          "Chrome": "y",
+          "IE": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "y",
+          "百度": "y",
+          "字节跳动": "y",
+          "QQ": "y"
+        },
+        "快应用": {
+          "华为": "n",
+          "联盟": "n"
+        },
+        "Vue": {
+            "vue2": "y",
+            "vue3": "y"
+        }
+      }
+    }
+  }
+}

src/uni_modules/uni-scss/readme.md

@@ -0,0 +1,4 @@
+`uni-sass` 是 `uni-ui`提供的一套全局样式 ，通过一些简单的类名和`sass`变量，实现简单的页面布局操作，比如颜色、边距、圆角等。
+
+### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-sass)
+#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 

src/uni_modules/uni-scss/styles/index.scss

@@ -0,0 +1,7 @@
+@import './setting/_variables.scss';
+@import './setting/_border.scss';
+@import './setting/_color.scss';
+@import './setting/_space.scss';
+@import './setting/_radius.scss';
+@import './setting/_text.scss';
+@import './setting/_styles.scss';

src/uni_modules/uni-scss/styles/setting/_border.scss

@@ -0,0 +1,3 @@
+.uni-border {
+	border: 1px $uni-border-1 solid;
+}

src/uni_modules/uni-scss/styles/setting/_color.scss

@@ -0,0 +1,66 @@
+
+// TODO 暂时不需要 class ，需要用户使用变量实现 ，如果使用类名其实并不推荐
+// @mixin get-styles($k,$c) {
+// 	@if $k == size or $k == weight{
+// 		font-#{$k}:#{$c}
+// 	}@else{
+// 		#{$k}:#{$c}
+// 	}
+// }
+$uni-ui-color:(
+	// 主色
+	primary: $uni-primary,
+	primary-disable: $uni-primary-disable,
+	primary-light: $uni-primary-light,
+	// 辅助色
+	success: $uni-success,
+	success-disable: $uni-success-disable,
+	success-light: $uni-success-light,
+	warning: $uni-warning,
+	warning-disable: $uni-warning-disable,
+	warning-light: $uni-warning-light,
+	error: $uni-error,
+	error-disable: $uni-error-disable,
+	error-light: $uni-error-light,
+	info: $uni-info,
+	info-disable: $uni-info-disable,
+	info-light: $uni-info-light,
+	// 中性色
+	main-color: $uni-main-color,
+	base-color: $uni-base-color,
+	secondary-color: $uni-secondary-color,
+	extra-color: $uni-extra-color,
+	// 背景色
+	bg-color: $uni-bg-color,
+	// 边框颜色
+	border-1: $uni-border-1,
+	border-2: $uni-border-2,
+	border-3: $uni-border-3,
+	border-4: $uni-border-4,
+	// 黑色
+	black:$uni-black,
+	// 白色
+	white:$uni-white,
+	// 透明
+	transparent:$uni-transparent
+) !default;
+@each $key, $child in $uni-ui-color {
+	.uni-#{"" + $key} {
+		color: $child;
+	}
+	.uni-#{"" + $key}-bg {
+		background-color: $child;
+	}
+}
+.uni-shadow-sm {
+	box-shadow: $uni-shadow-sm;
+}
+.uni-shadow-base {
+	box-shadow: $uni-shadow-base;
+}
+.uni-shadow-lg {
+	box-shadow: $uni-shadow-lg;
+}
+.uni-mask {
+	background-color:$uni-mask;
+}

src/uni_modules/uni-scss/styles/setting/_radius.scss

@@ -0,0 +1,55 @@
+@mixin radius($r,$d:null ,$important: false){
+  $radius-value:map-get($uni-radius, $r) if($important, !important, null);
+  // Key exists within the $uni-radius variable
+  @if (map-has-key($uni-radius, $r) and  $d){
+		@if $d == t {
+				border-top-left-radius:$radius-value;
+				border-top-right-radius:$radius-value;
+		}@else if $d == r {
+				border-top-right-radius:$radius-value;
+				border-bottom-right-radius:$radius-value;
+		}@else if $d == b {
+				border-bottom-left-radius:$radius-value;
+				border-bottom-right-radius:$radius-value;
+		}@else if $d == l {
+				border-top-left-radius:$radius-value;
+				border-bottom-left-radius:$radius-value;
+		}@else if $d == tl {
+				border-top-left-radius:$radius-value;
+		}@else if $d == tr {
+				border-top-right-radius:$radius-value;
+		}@else if $d == br {
+				border-bottom-right-radius:$radius-value;
+		}@else if $d == bl {
+				border-bottom-left-radius:$radius-value;
+		}
+  }@else{
+		border-radius:$radius-value;
+  }
+}
+
+@each $key, $child in $uni-radius {
+	@if($key){
+		.uni-radius-#{"" + $key} {
+				@include radius($key)
+		}
+	}@else{
+		.uni-radius {
+				@include radius($key)
+		}
+	}
+}
+
+@each $direction in t, r, b, l,tl, tr, br, bl {
+	@each $key, $child in $uni-radius {
+		@if($key){
+			.uni-radius-#{"" + $direction}-#{"" + $key} {
+				@include radius($key,$direction,false)
+			}
+		}@else{
+			.uni-radius-#{$direction} {
+				@include radius($key,$direction,false)
+			}
+		}
+	}
+}

src/uni_modules/uni-scss/styles/setting/_space.scss

@@ -0,0 +1,56 @@
+
+@mixin fn($space,$direction,$size,$n) {
+	@if $n {
+		#{$space}-#{$direction}: #{$size*$uni-space-root}px
+	} @else {
+		 #{$space}-#{$direction}: #{-$size*$uni-space-root}px
+	}
+}
+@mixin get-styles($direction,$i,$space,$n){
+	@if $direction == t {
+		@include fn($space, top,$i,$n);
+	} 
+	@if $direction == r {
+		@include fn($space, right,$i,$n);
+	} 
+	@if $direction == b {
+		@include fn($space, bottom,$i,$n);
+	} 
+	@if $direction == l {
+	 @include fn($space, left,$i,$n);
+	} 
+	@if $direction == x {
+		@include fn($space, left,$i,$n);
+		@include fn($space, right,$i,$n);
+	} 
+	@if $direction == y {
+		@include fn($space, top,$i,$n);
+		@include fn($space, bottom,$i,$n);
+	} 
+	@if $direction == a {
+		@if $n {
+			#{$space}:#{$i*$uni-space-root}px;
+		} @else {
+			#{$space}:#{-$i*$uni-space-root}px;
+		}
+	} 
+}
+
+@each $orientation in m,p {
+	$space: margin;
+	@if $orientation == m {
+		$space: margin;
+	} @else {
+		$space: padding;
+	}
+	@for $i from 0 through 16 {
+		@each $direction in t, r, b, l, x, y, a {
+			.uni-#{$orientation}#{$direction}-#{$i} { 
+				@include  get-styles($direction,$i,$space,true);
+			} 
+			.uni-#{$orientation}#{$direction}-n#{$i} { 
+				@include  get-styles($direction,$i,$space,false);
+			}
+		}
+	}
+}

src/uni_modules/uni-scss/styles/setting/_styles.scss

@@ -0,0 +1,167 @@
+/* #ifndef APP-NVUE */
+
+$-color-white:#fff;
+$-color-black:#000;
+@mixin base-style($color) {
+	color: #fff;
+	background-color: $color;
+	border-color: mix($-color-black, $color, 8%);
+	&:not([hover-class]):active {
+		background: mix($-color-black, $color, 10%);
+		border-color: mix($-color-black, $color, 20%);
+		color: $-color-white;
+		outline: none;
+	}
+}
+@mixin is-color($color) {
+	@include base-style($color);
+	&[loading] {
+		@include base-style($color);
+		&::before {
+			margin-right:5px;
+		}
+	}
+	&[disabled] {
+	  &,
+		&[loading],
+	  &:not([hover-class]):active {
+	    color: $-color-white;
+			border-color: mix(darken($color,10%), $-color-white);
+	    background-color: mix($color, $-color-white);
+	  }
+	}
+
+}
+@mixin base-plain-style($color) {
+	color:$color;
+	background-color: mix($-color-white, $color, 90%);
+	border-color: mix($-color-white, $color, 70%);
+	&:not([hover-class]):active {
+	  background: mix($-color-white, $color, 80%);
+	  color: $color;
+	  outline: none;
+		border-color: mix($-color-white, $color, 50%);
+	}
+}
+@mixin is-plain($color){
+	&[plain] {
+		@include base-plain-style($color);
+		&[loading] {
+			@include base-plain-style($color);
+			&::before {
+				margin-right:5px;
+			}
+		}
+		&[disabled] {
+		  &,
+		  &:active {
+		    color: mix($-color-white, $color, 40%);
+		    background-color: mix($-color-white, $color, 90%);
+				border-color: mix($-color-white, $color, 80%);
+		  }
+		}
+	}
+}
+
+
+.uni-btn {
+	margin: 5px;
+	color: #393939;
+	border:1px solid #ccc;
+	font-size: 16px;
+	font-weight: 200;
+	background-color: #F9F9F9;
+	// TODO 暂时处理边框隐藏一边的问题
+	overflow: visible;
+	&::after{
+		border: none;
+	}
+
+	&:not([type]),&[type=default] {
+		color: #999;
+		&[loading] {
+			background: none;
+			&::before {
+				margin-right:5px;
+			}
+		}
+
+
+
+		&[disabled]{
+			color: mix($-color-white, #999, 60%);
+		  &,
+			&[loading],
+		  &:active {
+				color: mix($-color-white, #999, 60%);
+		    background-color: mix($-color-white,$-color-black , 98%);
+				border-color: mix($-color-white,  #999, 85%);
+		  }
+		}
+
+		&[plain] {
+			color: #999;
+			background: none;
+			border-color: $uni-border-1;
+			&:not([hover-class]):active {
+				background: none;
+			  color: mix($-color-white, $-color-black, 80%);
+				border-color: mix($-color-white, $-color-black, 90%);
+			  outline: none;
+			}
+			&[disabled]{
+			  &,
+				&[loading],
+			  &:active {
+			    background: none;
+					color: mix($-color-white, #999, 60%);
+					border-color: mix($-color-white,  #999, 85%);
+			  }
+			}
+		}
+	}
+
+	&:not([hover-class]):active {
+	  color: mix($-color-white, $-color-black, 50%);
+	}
+
+	&[size=mini] {
+		font-size: 16px;
+		font-weight: 200;
+		border-radius: 8px;
+	}
+
+
+
+	&.uni-btn-small {
+		font-size: 14px;
+	}
+	&.uni-btn-mini {
+		font-size: 12px;
+	}
+
+	&.uni-btn-radius {
+		border-radius: 999px;
+	}
+	&[type=primary] {
+		@include is-color($uni-primary);
+		@include is-plain($uni-primary)
+	}
+	&[type=success] {
+		@include is-color($uni-success);
+		@include is-plain($uni-success)
+	}
+	&[type=error] {
+		@include is-color($uni-error);
+		@include is-plain($uni-error)
+	}
+	&[type=warning] {
+		@include is-color($uni-warning);
+		@include is-plain($uni-warning)
+	}
+	&[type=info] {
+		@include is-color($uni-info);
+		@include is-plain($uni-info)
+	}
+}
+/* #endif */

src/uni_modules/uni-scss/styles/setting/_text.scss

@@ -0,0 +1,24 @@
+@mixin get-styles($k,$c) {
+	@if $k == size or $k == weight{
+		font-#{$k}:#{$c}
+	}@else{
+		#{$k}:#{$c}
+	}
+}
+
+@each $key, $child in $uni-headings {
+	/* #ifndef APP-NVUE */
+	.uni-#{$key} {
+		@each $k, $c in $child {
+			@include get-styles($k,$c)
+		}
+	}
+	/* #endif */
+	/* #ifdef APP-NVUE */
+	.container .uni-#{$key} {
+		@each $k, $c in $child {
+			@include get-styles($k,$c)
+		}
+	}
+	/* #endif */
+}

src/uni_modules/uni-scss/styles/setting/_variables.scss

@@ -0,0 +1,146 @@
+// @use "sass:math";
+@import  '../tools/functions.scss';
+// 间距基础倍数
+$uni-space-root: 2 !default;
+// 边框半径默认值
+$uni-radius-root:5px !default;
+$uni-radius: () !default;
+// 边框半径断点
+$uni-radius: map-deep-merge(
+  (
+    0: 0,
+		// TODO 当前版本暂时不支持 sm 属性
+    // 'sm': math.div($uni-radius-root, 2),
+    null: $uni-radius-root,
+    'lg': $uni-radius-root * 2,
+    'xl': $uni-radius-root * 6,
+    'pill': 9999px,
+    'circle': 50%
+  ),
+  $uni-radius
+);
+// 字体家族
+$body-font-family: 'Roboto', sans-serif !default;
+// 文本
+$heading-font-family: $body-font-family !default;
+$uni-headings: () !default;
+$letterSpacing: -0.01562em;
+$uni-headings: map-deep-merge(
+  (
+    'h1': (
+      size: 32px,
+			weight: 300,
+			line-height: 50px,
+			// letter-spacing:-0.01562em
+    ),
+    'h2': (
+      size: 28px,
+      weight: 300,
+      line-height: 40px,
+      // letter-spacing: -0.00833em
+    ),
+    'h3': (
+      size: 24px,
+      weight: 400,
+      line-height: 32px,
+      // letter-spacing: normal
+    ),
+    'h4': (
+      size: 20px,
+      weight: 400,
+      line-height: 30px,
+      // letter-spacing: 0.00735em
+    ),
+    'h5': (
+      size: 16px,
+      weight: 400,
+      line-height: 24px,
+      // letter-spacing: normal
+    ),
+    'h6': (
+      size: 14px,
+      weight: 500,
+      line-height: 18px,
+      // letter-spacing: 0.0125em
+    ),
+    'subtitle': (
+      size: 12px,
+      weight: 400,
+      line-height: 20px,
+      // letter-spacing: 0.00937em
+    ),
+    'body': (
+      font-size: 14px,
+			font-weight: 400,
+			line-height: 22px,
+			// letter-spacing: 0.03125em
+    ),
+    'caption': (
+      'size': 12px,
+      'weight': 400,
+      'line-height': 20px,
+      // 'letter-spacing': 0.03333em,
+      // 'text-transform': false
+    )
+  ),
+  $uni-headings
+);
+
+
+
+// 主色
+$uni-primary: #2979ff !default;
+$uni-primary-disable:lighten($uni-primary,20%) !default;
+$uni-primary-light: lighten($uni-primary,25%) !default;
+
+// 辅助色
+// 除了主色外的场景色，需要在不同的场景中使用（例如危险色表示危险的操作）。
+$uni-success: #18bc37 !default;
+$uni-success-disable:lighten($uni-success,20%) !default;
+$uni-success-light: lighten($uni-success,25%) !default;
+
+$uni-warning: #f3a73f !default;
+$uni-warning-disable:lighten($uni-warning,20%) !default;
+$uni-warning-light: lighten($uni-warning,25%) !default;
+
+$uni-error: #e43d33 !default;
+$uni-error-disable:lighten($uni-error,20%) !default;
+$uni-error-light: lighten($uni-error,25%) !default;
+
+$uni-info: #8f939c !default;
+$uni-info-disable:lighten($uni-info,20%) !default;
+$uni-info-light: lighten($uni-info,25%) !default;
+
+// 中性色
+// 中性色用于文本、背景和边框颜色。通过运用不同的中性色，来表现层次结构。
+$uni-main-color: #3a3a3a !default; 			// 主要文字
+$uni-base-color: #6a6a6a !default;			// 常规文字
+$uni-secondary-color: #909399 !default;	// 次要文字
+$uni-extra-color: #c7c7c7 !default;			// 辅助说明
+
+// 边框颜色
+$uni-border-1: #F0F0F0 !default;
+$uni-border-2: #EDEDED !default;
+$uni-border-3: #DCDCDC !default;
+$uni-border-4: #B9B9B9 !default;
+
+// 常规色
+$uni-black: #000000 !default;
+$uni-white: #ffffff !default;
+$uni-transparent: rgba($color: #000000, $alpha: 0) !default;
+
+// 背景色
+$uni-bg-color: #f7f7f7 !default;
+
+/* 水平间距 */
+$uni-spacing-sm: 8px !default;
+$uni-spacing-base: 15px !default;
+$uni-spacing-lg: 30px !default;
+
+// 阴影
+$uni-shadow-sm:0 0 5px rgba($color: #d8d8d8, $alpha: 0.5) !default;
+$uni-shadow-base:0 1px 8px 1px rgba($color: #a5a5a5, $alpha: 0.2) !default;
+$uni-shadow-lg:0px 1px 10px 2px rgba($color: #a5a4a4, $alpha: 0.5) !default;
+
+// 蒙版
+$uni-mask: rgba($color: #000000, $alpha: 0.4) !default;

src/uni_modules/uni-scss/styles/tools/functions.scss

@@ -0,0 +1,19 @@
+// 合并 map
+@function map-deep-merge($parent-map, $child-map){
+	$result: $parent-map;
+	@each $key, $child in $child-map {
+		$parent-has-key: map-has-key($result, $key);
+		$parent-value: map-get($result, $key);
+		$parent-type: type-of($parent-value);
+		$child-type: type-of($child);
+		$parent-is-map: $parent-type == map;
+		$child-is-map: $child-type == map;
+			
+		@if (not $parent-has-key) or ($parent-type != $child-type) or (not ($parent-is-map and $child-is-map)){
+			$result: map-merge($result, ( $key: $child ));
+		}@else {
+			$result: map-merge($result, ( $key: map-deep-merge($parent-value, $child) ));
+		}
+	}
+	@return $result;
+};

src/uni_modules/uni-scss/theme.scss

@@ -0,0 +1,31 @@
+// 间距基础倍数
+$uni-space-root: 2;
+// 边框半径默认值
+$uni-radius-root:5px;
+// 主色
+$uni-primary: #2979ff;
+// 辅助色
+$uni-success: #4cd964;
+// 警告色
+$uni-warning: #f0ad4e;
+// 错误色
+$uni-error: #dd524d;
+// 描述色
+$uni-info: #909399;
+// 中性色
+$uni-main-color: #303133;
+$uni-base-color: #606266;
+$uni-secondary-color: #909399;
+$uni-extra-color: #C0C4CC;
+// 背景色
+$uni-bg-color: #f5f5f5;
+// 边框颜色
+$uni-border-1: #DCDFE6;
+$uni-border-2: #E4E7ED;
+$uni-border-3: #EBEEF5;
+$uni-border-4: #F2F6FC;
+
+// 常规色
+$uni-black: #000000;
+$uni-white: #ffffff;
+$uni-transparent: rgba($color: #000000, $alpha: 0);

src/uni_modules/uni-scss/variables.scss

@@ -0,0 +1,62 @@
+@import './styles/setting/_variables.scss';
+// 间距基础倍数
+$uni-space-root: 2;
+// 边框半径默认值
+$uni-radius-root:5px;
+
+// 主色
+$uni-primary: #2979ff;
+$uni-primary-disable:mix(#fff,$uni-primary,50%);
+$uni-primary-light: mix(#fff,$uni-primary,80%);
+
+// 辅助色
+// 除了主色外的场景色，需要在不同的场景中使用（例如危险色表示危险的操作）。
+$uni-success: #18bc37;
+$uni-success-disable:mix(#fff,$uni-success,50%);
+$uni-success-light: mix(#fff,$uni-success,80%);
+
+$uni-warning: #f3a73f;
+$uni-warning-disable:mix(#fff,$uni-warning,50%);
+$uni-warning-light: mix(#fff,$uni-warning,80%);
+
+$uni-error: #e43d33;
+$uni-error-disable:mix(#fff,$uni-error,50%);
+$uni-error-light: mix(#fff,$uni-error,80%);
+
+$uni-info: #8f939c;
+$uni-info-disable:mix(#fff,$uni-info,50%);
+$uni-info-light: mix(#fff,$uni-info,80%);
+
+// 中性色
+// 中性色用于文本、背景和边框颜色。通过运用不同的中性色，来表现层次结构。
+$uni-main-color: #3a3a3a; 			// 主要文字
+$uni-base-color: #6a6a6a;			// 常规文字
+$uni-secondary-color: #909399;	// 次要文字
+$uni-extra-color: #c7c7c7;			// 辅助说明
+
+// 边框颜色
+$uni-border-1: #F0F0F0;
+$uni-border-2: #EDEDED;
+$uni-border-3: #DCDCDC;
+$uni-border-4: #B9B9B9;
+
+// 常规色
+$uni-black: #000000;
+$uni-white: #ffffff;
+$uni-transparent: rgba($color: #000000, $alpha: 0);
+
+// 背景色
+$uni-bg-color: #f7f7f7;
+
+/* 水平间距 */
+$uni-spacing-sm: 8px;
+$uni-spacing-base: 15px;
+$uni-spacing-lg: 30px;
+
+// 阴影
+$uni-shadow-sm:0 0 5px rgba($color: #d8d8d8, $alpha: 0.5);
+$uni-shadow-base:0 1px 8px 1px rgba($color: #a5a5a5, $alpha: 0.2);
+$uni-shadow-lg:0px 1px 10px 2px rgba($color: #a5a4a4, $alpha: 0.5);
+
+// 蒙版
+$uni-mask: rgba($color: #000000, $alpha: 0.4);