约束类型

README.md

@@ -32,14 +32,17 @@ pnpm install
 :: 微信小程序编译运行
 npm run dev:mp-weixin
 ```
+
 成功后使用微信小程序打开：dist\dev\mp-weixin
 
 ### 代码压缩
+
 默认是启动代码压缩的，
 
 如果需要关闭代码压缩，可以将vite.config.js中的build.minify赋值为false。
 
 如果需要打开代码压缩，可以将vite.config.js中的build.minify赋值为true。
+
 # 作者建议
 
 ### 对于选项式
@@ -67,6 +70,7 @@ import modal from '@/plugins/modal' // 建议使用modal打开弹窗，理由：
 (主包最低809kb左右)
 
 ### 删除geek组件
+
 1. 删除pages_geek和components/geek-xd文件夹
 2. 删除pages.json中subPackages的root值为“pages_geek/pages”的配置
 3. 删除pages/template.config.js中geek组件
@@ -82,7 +86,6 @@ import modal from '@/plugins/modal' // 建议使用modal打开弹窗，理由：
 5. 删除static中的uview，里面都是示例图片。
 6. 删除plugins中的config.js和common.js，并在plugins/index.js中删除相关配置
 
-
 ### 删除uchart
 
 （占用主包175kb左右，不建议删除，以防以后会用）
@@ -107,7 +110,6 @@ app.use(uviewPlus)
 3. App.vue中删除  @import '@/static/scss/index.scss';
 4. package.json中删除    "clipboard": "^2.0.11","dayjs": "^1.11.9","uview-plus": "^3.1.36",
 
-
 # 附录
 
 [Vue3官网](https://cn.vuejs.org/)；

src/components/geek-xd/components/geek-color-picker/geek-color-picker.vue

@@ -103,12 +103,7 @@ export default {
 			hsb: { h: 0, s: 0, b: 0 },
 			site: [{ top: 0, left: 0 }, { left: 0 }, { left: 0 }],
 			index: 0,
-			bgcolor: {
+			bgcolor: { r: 255, g: 0, b: 0, a: 1 },
-				r: 255,
-				g: 0,
-				b: 0,
-				a: 1
-			},
 			hex: '#000000',
 			mode: true,
 			colorList: [
@@ -119,67 +114,20 @@ export default {
 				{ r: 63, g: 81, b: 181, a: 1 },
 				{ r: 33, g: 150, b: 243, a: 1 },
 				{ r: 3, g: 169, b: 244, a: 1 },
-				{ r: 0, g: 188, b: 212, a: 1 }, {
+				{ r: 0, g: 188, b: 212, a: 1 },
-					r: 0,
+				{ r: 0, g: 150, b: 136, a: 1 },
-					g: 150,
+				{ r: 76, g: 175, b: 80, a: 1 },
-					b: 136,
+				{ r: 139, g: 195, b: 74, a: 1 },
-					a: 1
+				{ r: 205, g: 220, b: 57, a: 1 },
-				}, {
+				{ r: 255, g: 235, b: 59, a: 1 },
-					r: 76,
+				{ r: 255, g: 193, b: 7, a: 1 },
-					g: 175,
+				{ r: 255, g: 152, b: 0, a: 1 },
-					b: 80,
+				{ r: 255, g: 87, b: 34, a: 1 },
-					a: 1
+				{ r: 121, g: 85, b: 72, a: 1 },
-				}, {
+				{ r: 158, g: 158, b: 158, a: 1 },
-					r: 139,
+				{ r: 0, g: 0, b: 0, a: 0.5 },
-					g: 195,
+				{ r: 0, g: 0, b: 0, a: 0 },
-					b: 74,
+			]
-					a: 1
-				}, {
-					r: 205,
-					g: 220,
-					b: 57,
-					a: 1
-				}, {
-					r: 255,
-					g: 235,
-					b: 59,
-					a: 1
-				}, {
-					r: 255,
-					g: 193,
-					b: 7,
-					a: 1
-				}, {
-					r: 255,
-					g: 152,
-					b: 0,
-					a: 1
-				}, {
-					r: 255,
-					g: 87,
-					b: 34,
-					a: 1
-				}, {
-					r: 121,
-					g: 85,
-					b: 72,
-					a: 1
-				}, {
-					r: 158,
-					g: 158,
-					b: 158,
-					a: 1
-				}, {
-					r: 0,
-					g: 0,
-					b: 0,
-					a: 0.5
-				}, {
-					r: 0,
-					g: 0,
-					b: 0,
-					a: 0
-				},]
 		};
 	},
 	created() {

src/components/geek-xd/types/index.ts

@@ -0,0 +1,17 @@
+export interface Menu {
+    icon: string,
+    label: string
+}
+
+export interface Commodity {
+    img: string,
+    title: string,
+    subTitle: string,
+    price: number
+}
+
+export interface CommodityOrder extends Commodity {
+    shop: string,
+    status: string,
+    num: number
+}

src/pages_geek/pages/index/index.vue

@@ -12,7 +12,7 @@
   <uni-section class="mb-10" title="菜单" sub-title="menu" type="line"></uni-section>
   <u-row>
     <u-col :span="2.1" :offset="0.3" v-for="menu, index in menus" :key="index">
-      <geek-menu :icon="menu.icon" :label="menu.label" :size="60" @click="modal.msg(menu.label)" type="circle" />
+      <geek-menu v-bind=menu :size="60" @click="modal.msg(menu.label)" type="circle" />
     </u-col>
   </u-row>
   <u-row>
@@ -22,16 +22,15 @@
   </u-row>
 
   <uni-section class="mb-10" title="商品列表" sub-title="commodity" type="line"></uni-section>
-  <geek-commodity v-for="item, index in commodityList" :key="index" :price="item.price" :title="item.title"
+  <geek-commodity v-for="item, index in commodityList" :key="index" v-bind="item" type="line"
-    :sub-title="item.subTitle" :img="item.img" type="line" @click="modal.msg(item.title)" />
+    @click="modal.msg(item.title)" />
-  <geek-commodity v-for="item, index in commodityList" :key="index" :price="item.price" :title="item.title"
+  <geek-commodity v-for="item, index in commodityList" :key="index" v-bind="item" type="rect"
-    :sub-title="item.subTitle" :img="item.img" type="rect" @click="modal.msg(item.title)" />
+    @click="modal.msg(item.title)" />
 
 
   <uni-section class="mb-10" title="订单列表" sub-title="order" type="line"></uni-section>
-  <geek-order v-for="item, index in orderList" :key="index" :img="item.img" :label="item.title" :shop="item.shop"
+  <geek-order v-for="item, index in orderList" :key="index" v-bind="item" @more="modal.msg('更多')"
-    :status="item.status" :price="item.price" @more="modal.msg('更多')" @again="modal.msg('再次购买')" @return="modal.msg('退换')"
+    @again="modal.msg('再次购买')" @return="modal.msg('退换')" @sell="modal.msg('卖了换钱')"></geek-order>
-    @sell="modal.msg('卖了换钱')" :num="item.num"></geek-order>
 
   <uni-section class="mb-10" title="颜色选择器" sub-title="order" type="line"></uni-section>
   <geek-color-picker ref="gk"></geek-color-picker>
@@ -39,22 +38,21 @@
 
 
   <uni-section class="mb-10" title="二维码" sub-title="order" type="line"></uni-section>
-  <geek-qrcode cid="qrcode2" ref="qrcode2" val="二维码" :loadMake="true"/>
+  <geek-qrcode cid="qrcode2" ref="qrcode2" val="二维码" :loadMake="true" />
-
 </template>
 
 <script setup lang="ts">
 import { ref, reactive } from 'vue';
 import modal from '@/plugins/modal'
+import { Commodity, CommodityOrder, Menu } from "@/components/geek-xd/types"
+
 const gk = ref(null)
-function open(){
+function open() {
   //@ts-ignore
   gk.value.open()
 }
 
-
+const menus:Array<Menu> = reactive([
-
-const menus = reactive([
   { icon: "/static/images/icon/rocket.png", label: '抢单' },
   { icon: "/static/images/icon/phone.png", label: '回访' },
   { icon: "/static/images/icon/message.png", label: '消息' },
@@ -62,7 +60,7 @@ const menus = reactive([
   { icon: "/static/images/icon/knowledge.png", label: '知识库' }
 ]);
 
-const commodityList = reactive([
+const commodityList: Array<Commodity> = reactive([
   {
     img: '/static/images/banner/banner01.jpg',
     title: '商品1',
@@ -83,7 +81,7 @@ const commodityList = reactive([
   }
 ])
 
-const orderList = [
+const orderList: Array<CommodityOrder> = [
   {
     shop: 'geek自营旗舰店',
     status: '完成',
@@ -92,7 +90,6 @@ const orderList = [
     subTitle: '商品1简介',
     price: 100.32,
     num: 10
-
   },
   {
     shop: 'geek自营旗舰店',

src/plugins/index.ts

@@ -7,6 +7,10 @@ export const tab = Tab;
 export const auth = Auth;
 export const modal = Modal;
 
+/**
+ * 在组合式API中可以通过 import { tab, auth, modal } form '@/plugins' 来使用tab、auth、modal
+ * 在选项式API中可以通过 this.$tab  this.$auth  this.$modal 来使用tab、auth、modal
+ */
 export default {
   install(app: App): void {
     app.config.globalProperties.$tab = tab

src/store/getters.ts

@@ -1,4 +1,6 @@
-const getters = {
+import { GetterTree } from "vuex"
+
+const getters:GetterTree<any,any> = {
   token: state => state.user.token,
   avatar: state => state.user.avatar,
   name: state => state.user.name,

src/store/index.ts

@@ -3,7 +3,7 @@ import getters from './getters'
 import { createStore } from "vuex";
 const store = createStore({
   modules: {
-    user
+    user,
   },
   getters
 });

src/store/modules/user.ts

@@ -3,10 +3,12 @@ import storage from '@/utils/storage'
 import constant from '@/utils/constant'
 import { login, logout, getInfo } from '@/api/login'
 import { getToken, setToken, removeToken } from '@/utils/auth'
+import { UserState, UserForm } from '@/types/store'
+import { Module } from 'vuex'
 
 const baseUrl = config.baseUrl
 
-const user = {
+const user: Module<UserState, UserState> = {
   state: {
     token: getToken(),
     name: storage.get(constant.name),
@@ -14,24 +16,23 @@ const user = {
     roles: storage.get(constant.roles),
     permissions: storage.get(constant.permissions)
   },
-
   mutations: {
-    SET_TOKEN: (state, token) => {
+    SET_TOKEN: (state, token: string) => {
       state.token = token
     },
-    SET_NAME: (state, name) => {
+    SET_NAME: (state, name: string) => {
       state.name = name
       storage.set(constant.name, name)
     },
-    SET_AVATAR: (state, avatar) => {
+    SET_AVATAR: (state, avatar: string) => {
       state.avatar = avatar
       storage.set(constant.avatar, avatar)
     },
-    SET_ROLES: (state, roles) => {
+    SET_ROLES: (state, roles: Array<string>) => {
       state.roles = roles
       storage.set(constant.roles, roles)
     },
-    SET_PERMISSIONS: (state, permissions) => {
+    SET_PERMISSIONS: (state, permissions: Array<string>) => {
       state.permissions = permissions
       storage.set(constant.permissions, permissions)
     }
@@ -39,16 +40,16 @@ const user = {
 
   actions: {
     // 登录
-    Login({ commit }, userInfo) {
+    Login({ commit }, userInfo: UserForm) {
       const username = userInfo.username
       const password = userInfo.password
       const code = userInfo.code
       const uuid = userInfo.uuid
       return new Promise((resolve, reject) => {
-        login(username, password, code, uuid).then(res => {
+        login(username, password, code, uuid).then((res: any) => {
           setToken(res.token)
           commit('SET_TOKEN', res.token)
-          resolve()
+          resolve(res)
         }).catch(error => {
           reject(error)
         })
@@ -58,7 +59,7 @@ const user = {
     // 获取用户信息
     GetInfo({ commit, state }) {
       return new Promise((resolve, reject) => {
-        getInfo().then(res => {
+        getInfo().then((res: any) => {
           const user = res.user
           const avatar = (user == null || user.avatar == "" || user.avatar == null) ? "@/static/images/profile.jpg" : baseUrl + user.avatar
           const username = (user == null || user.userName == "" || user.userName == null) ? "" : user.userName
@@ -80,13 +81,13 @@ const user = {
     // 退出系统
     LogOut({ commit, state }) {
       return new Promise((resolve, reject) => {
-        logout(state.token).then(() => {
+        logout().then((res) => {
           commit('SET_TOKEN', '')
           commit('SET_ROLES', [])
           commit('SET_PERMISSIONS', [])
           removeToken()
           storage.clean()
-          resolve()
+          resolve(res)
         }).catch(error => {
           reject(error)
         })

src/types/request.ts

@@ -1,27 +1,40 @@
 interface BaseRequestConfig {
     headers?: {
+        /** 是否在请求头中添加token 默认是 */
         isToken: boolean
     },
+    /** 请求头配置 */
     header?: any,
+    /** 接口路径 */
     url: string,
+    /** 请求参数 */
     params?: any,
+    /** 超时事件 */
     timeout?: number | undefined,
 }
-
 export interface RequestConfig extends BaseRequestConfig {
+    /** 请求方式 */
     method?: "OPTIONS" | "GET" | "HEAD" | "POST" | "PUT" | "DELETE" | "TRACE" | "CONNECT" | undefined
+    /** 重新设置baseUrl */
     baseUrl?: string,
+    /** 请求体参数 */
     data?: any
 }
 
 export interface RequestUploadConfig extends BaseRequestConfig {
+    /** 文件路径 */
     filePath: string,
+    /** 文件对应变量名 默认file */
     name?: string,
+    /** 其他表单参数 */
     formData: any
 }
 
 export interface ResponseData {
+    /** 响应码 */
     code: number,
+    /** 响应数据 */
     data: any,
+    /** 响应信息 */
     msg: string
 }

src/types/store.ts

@@ -0,0 +1,17 @@
+
+export interface UserState {
+    token: string,
+    name: string,
+    avatar: string,
+    roles: Array<string>
+    permissions: Array<string>
+}
+
+export interface UserForm {
+    username: string
+    password: string
+    code: string
+    uuid: string
+}
+
+

vite.config.js

@@ -14,5 +14,8 @@ export default defineConfig(() => {
         plugins: [
             uni()
         ],
+        exclude:[
+            /\/README\.md$/,
+        ]
     }
 })