From 8aef6cdc7aa6937d0561804632661e9efa7b9751 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=90=B4=E6=B2=BB=E9=9C=96?= <3201455247@qq.com>
Date: Thu, 28 Sep 2023 10:40:45 +0800
Subject: [PATCH] =?UTF-8?q?=E6=90=9C=E7=B4=A2=E5=8A=9F=E8=83=BD=E5=9F=BA?=
 =?UTF-8?q?=E6=9C=AC=E5=AE=9E=E7=8E=B0=EF=BC=8C=E5=9F=BA=E7=A1=80=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E8=B7=B3=E8=BD=AC=EF=BC=8C=E8=8F=9C=E5=93=81=E8=AF=A6?=
 =?UTF-8?q?=E6=83=85=E4=B8=8E=E6=90=9C=E7=B4=A2=E5=88=97=E8=A1=A8=E7=9A=84?=
 =?UTF-8?q?=E5=AE=9E=E7=8E=B0=EF=BC=8C=E8=8F=9C=E5=93=81=E8=AF=84=E4=BB=B7?=
 =?UTF-8?q?=E7=9A=84=E9=83=A8=E5=88=86=E5=AE=9E=E7=8E=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages.json                                    |  54 +++-
 subpkg/search/search.vue                      | 193 ++++++++++--
 subpkg/searchList/searchList.vue              |  83 +++++
 uni_modules/uni-search-bar/changelog.md       |  33 ++
 .../components/uni-search-bar/i18n/en.json    |   4 +
 .../components/uni-search-bar/i18n/index.js   |   8 +
 .../uni-search-bar/i18n/zh-Hans.json          |   4 +
 .../uni-search-bar/i18n/zh-Hant.json          |   4 +
 .../uni-search-bar/uni-search-bar.vue         | 298 ++++++++++++++++++
 uni_modules/uni-search-bar/package.json       |  89 ++++++
 uni_modules/uni-search-bar/readme.md          |  14 +
 uni_modules/uni-tag/changelog.md              |  21 ++
 .../uni-tag/components/uni-tag/uni-tag.vue    | 252 +++++++++++++++
 uni_modules/uni-tag/package.json              |  87 +++++
 uni_modules/uni-tag/readme.md                 |  13 +
 15 files changed, 1105 insertions(+), 52 deletions(-)
 create mode 100644 subpkg/searchList/searchList.vue
 create mode 100644 uni_modules/uni-search-bar/changelog.md
 create mode 100644 uni_modules/uni-search-bar/components/uni-search-bar/i18n/en.json
 create mode 100644 uni_modules/uni-search-bar/components/uni-search-bar/i18n/index.js
 create mode 100644 uni_modules/uni-search-bar/components/uni-search-bar/i18n/zh-Hans.json
 create mode 100644 uni_modules/uni-search-bar/components/uni-search-bar/i18n/zh-Hant.json
 create mode 100644 uni_modules/uni-search-bar/components/uni-search-bar/uni-search-bar.vue
 create mode 100644 uni_modules/uni-search-bar/package.json
 create mode 100644 uni_modules/uni-search-bar/readme.md
 create mode 100644 uni_modules/uni-tag/changelog.md
 create mode 100644 uni_modules/uni-tag/components/uni-tag/uni-tag.vue
 create mode 100644 uni_modules/uni-tag/package.json
 create mode 100644 uni_modules/uni-tag/readme.md

diff --git a/pages.json b/pages.json
index 4d9b477..ee3a6e0 100644
--- a/pages.json
+++ b/pages.json
@@ -44,7 +44,6 @@
             }
             
         }
-        
     ],
 	"globalStyle": {
 		"navigationBarTextStyle": "black",
@@ -54,14 +53,35 @@
 	},
 	"subpackages": [{
 		"root":"subpkg",
-		"pages": [{
-			"path" : "search/search",
-			"style" :{}
-			
-		},  {
-			"path" : "dishDetail/dishDetail",
-			"style" :{}                                                                              
-		}]
+		"pages" : [
+                {
+                    "path" : "dishDetail/dishDetail",
+                    "style" :                                                                                    
+                {
+                    "navigationBarTitleText": "",
+                    "enablePullDownRefresh": false
+                }
+                
+                }
+                ,{
+                    "path" : "search/search",
+                    "style" :                                                                                    
+                {
+                    "navigationBarTitleText": "",
+                    "enablePullDownRefresh": false
+                }
+                
+                },
+				{
+				    "path" : "searchList/searchList",
+				    "style" :                                                                                    
+				{
+				    "navigationBarTitleText": "",
+				    "enablePullDownRefresh": false
+				}
+				
+				}
+            ]
 	}],
 	"tabBar": {
 			"color": "#a9a9a9",
@@ -69,26 +89,26 @@
 			"list": [{
 					"pagePath": "pages/home/home",
 					"text": "首页",
-					"iconPath": "static/static/images/home/home1.png",
-					"selectedIconPath": "static/static/images/home/home2.png"
+					"iconPath": "static/static/images/home/home2.png",
+					"selectedIconPath": "static/static/images/home/home1.png"
 				},
 				{
 					"pagePath": "pages/search/search",
 					"text": "搜索",
-					"iconPath": "",
-					"selectedIconPath": ""
+					"iconPath": "static/static/images/home/search_icon.png",
+					"selectedIconPath": "static/static/images/home/search_icon.png"
 				},
 				{
 					"pagePath": "pages/ranking/ranking",
 					"text": "排行榜",
-					"iconPath": "",
-					"selectedIconPath": ""
+					"iconPath": "static/star0.png",
+					"selectedIconPath": "static/start1.png"
 				},
 				{
 					"pagePath": "pages/my/my",
 					"text": "个人中心",
-					"iconPath": "static/static/images/home/my.png",
-					"selectedIconPath": ""
+					"iconPath": "static/static/images/user/head.png",
+					"selectedIconPath": "static/static/images/home/my.png"
 				}
 			]
 		}
diff --git a/subpkg/search/search.vue b/subpkg/search/search.vue
index 15af064..9d020de 100644
--- a/subpkg/search/search.vue
+++ b/subpkg/search/search.vue
@@ -1,69 +1,192 @@
 <template>
 	<view>
-		<d-search-log @onSearchNameApi="onSearchNameApi"></d-search-log>
-		<view>
-			<view class="serach-list" v-for="(data,i) in dishList" :key="i">
-
-				<view class="dish-item">
-					<image class="dish-image" :src="data[i].dish_src"></image>
-				</view>
-
+		<view class="search-box">
+			<uni-search-bar @input="input" :radius="100" cancelButton="none" :focus="true"></uni-search-bar>
+			<button  class="search" @click="goToSearchList">搜索</button>
+		</view>
+		<!--搜索建议-->
+		<view class="sugest-list" v-if="searchresult.length !== 0">
+			<view class="sugest-item" v-for="(item,i) in searchresult" :key="i" @click="gotodetail(item)">
+				<view class="dish-name">{{item.dish_name}}</view>
+				<uni-icons type="arrowright" size="16"></uni-icons>
+			</view>
+		</view>
+		<!--搜索历史-->
+		<view class="history-box" v-else>
+			<!--标题区域-->
+			<view class="history-title">
+				<text>搜索历史</text>
+				<uni-icons type="trash" size="17" @click="clean"></uni-icons>
+			</view>
+			<!--列表区域-->
+			<view class="history-list">
+				<uni-tag  v-for="(item,i) in histories" :text="item" :key="i" @click="gotosearchdetail(item)"></uni-tag>
 			</view>
 		</view>
 	</view>
 </template>
 
 <script>
-	import Vue from 'vue'
 	export default {
 		data() {
 			return {
-				dishList: [],
+				timer: null,
+				kw: '',
+				searchresult: [],
+				//搜索结果
+				searchlist: [],
+				//搜索历史的数组
+				historylist: [],
 			};
 		},
 		onLoad() {
-
+			this.historylist = JSON.parse(uni.getStorageSync('kw') || '[]')
+			this.cnt = this.historylist.length
+			console.log(this.historylist)
 		},
 		methods: {
-			async onSearchNameApi(e) {
+			async goToSearchList() {
+				this.getsearchresult()
+				this.savesearchhistory()
 				let that = this
-				let data = []
+				setTimeout(()=>{
+					uni.$emit('item',this.searchresult)
+				},500)
+				uni.navigateTo({
+					url:'/subpkg/searchList/searchList?searchlist=' + encodeURIComponent(JSON.stringify(this.searchresult))
+				})
+			},
+			//input输入事件的处理函数
+			input(e) {
+				//延时器
+				clearTimeout(this.timer)
+				this.timer = setTimeout(
+					() => {
+						this.kw = e
+						this.getsearchresult()
+					}, 500)
+			},
+			async getsearchresult() {
+				let that = this
+				//判断搜索关键词是否为空
+				if (this.kw.length === 0) {
+					this.searchresult = []
+					return
+				}
 				uniCloud.callFunction({
-					name: 'getDishes',
-					data: {
-						api: 'getByName',
-						dish_name: e
+					name:'getDishes',
+					data:{
+						api:'getByName',
+						dish_name:that.kw
 					},
-					success: function(res) {
-
-						/*that.dishList.splice(0)
-						data = [res.result.data]
-						for (let i = 0; i < data.length; i++) {
-							Vue.set(that.dishList, i, data[i])
-						}*/
-						
-						console.log(res)
+					success:function(res){
+						that.searchresult = res.result.data
+						that.searchlist = res.result.data
+					}
+				})
+			},
+			gotodetail(item) {
+				this.savesearchhistory()
+				console.log(item._id)
+				uni.navigateTo({
+					url: '/subpkg/dishDetail/dishDetail?_id=' +encodeURIComponent(JSON.stringify(item._id))
+				})
+			},
+			savesearchhistory() {
+				const set = new Set(this.historylist)
+				set.delete(this.kw)
+				set.add(this.kw)
+				this.historylist = Array.from(set)
+				uni.setStorageSync('kw', JSON.stringify(this.historylist))
+			},
+			//清空本地历史记录
+			clean() {
+				this.historylist = []
+				uni.setStorageSync('kw', '[]')
+				this.cnt = 0
+			},
+			gotosearchdetail(item) {
+				let historyresult = []
+				uniCloud.callFunction({
+					name:'getDishes',
+					data:{
+						api:'getByName',
+						dish_name:item
+					},
+					success:function(res){
+						historyresult = res.result.data
 					}
 				})
+				setTimeout(()=>{
+					uni.$emit('item',historyresult)
+				},500)
+				uni.navigateTo({
+					url:'/subpkg/searchList/searchList?searchlist=' + encodeURIComponent(JSON.stringify(historyresult))
+				})
+				
 			}
+		},
+		computed: {
+			histories() {
+				return [...this.historylist].reverse()
 
-
+			}
 		}
 	}
 </script>
 
 <style lang="scss">
-	.searchbox {
-		width: 500;
-		display: flex;
+	.search-box {
+		position: sticky;
+		top: 0;
+		z-index: 999;
 	}
 
-	.search-list {
-		display: flex;
+	.sugest-list {
+		padding: 0 5px;
+
+		.sugest-item {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			font-size: 12px;
+			padding: 13px 0;
+			border-bottom: 1 px solid #efefef;
+
+			.dish-name {
+				white-space: nowrap;
+				overflow: hidden;
+				text-overflow: ellipsis;
+			}
+		}
 	}
 
-	.dish_image {
-		width: 100rpx;
-		height: 70rpx;
+	.history-box {
+		padding: 0 5px;
+
+		.history-title {
+			display: flex;
+			justify-content: space-between;
+			height: 40px;
+			align-items: center;
+			font-size: 13px;
+			border-bottom: 1px solid #efefef;
+		}
+
+		.history-list {
+			display: flex;
+			flex-wrap: wrap;
+
+			.uni-tag {
+				margin-top: 5px;
+				margin-right: 5px;
+			}
+		}
+	}
+	.search{
+		height: 50rpx;
+		width: 200rpx;
+		font-size: 20rpx;
+		justify-content: center;
 	}
 </style>
\ No newline at end of file
diff --git a/subpkg/searchList/searchList.vue b/subpkg/searchList/searchList.vue
new file mode 100644
index 0000000..b5a9ee1
--- /dev/null
+++ b/subpkg/searchList/searchList.vue
@@ -0,0 +1,83 @@
+<template>
+	<view>
+		<view class="search-list" v-for="data in dishList" :key="data._id">
+
+			<view class="dish-item" @click="goToDetail(data)">
+				<image class="dish-image" :src="data.dish_src"></image>
+			</view>
+			<view class="dish-intro">
+				<text>{{'菜名：' +  data.dish_name + '\n'}}</text>
+				<text>{{'地点：' +  data.location + '\n'}}</text>
+				<text>{{'窗口：' +  data.window_name + '\n'}}</text>
+				<text>{{'评分：' +  data.avg_score + '\n'}}</text>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				dishList: []
+			};
+		},
+		onLoad(e) {
+			let that = this
+			uni.$on('item', (res) => {
+				that.dishList = res
+				console.log(res)
+			})
+			//this.dishList = JSON.parse(decodeURIComponent(e.searchlist))
+
+		},
+		methods:{
+			goToDetail(item) {
+				console.log(item._id)
+				uni.navigateTo({
+					url: '/subpkg/dishDetail/dishDetail?_id=' +encodeURIComponent(JSON.stringify(item._id)) 
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.search-list {
+		padding-left: 5rpx;
+		padding-right: 5rpx;
+		border-style: solid;
+		border-radius: 5px;
+		border-color: #65654b;
+		border-width: 3rpx;
+		display: flex;
+		justify-content: space-around;
+
+	}
+
+	.dish-intro {
+		padding-left: 5rpx;
+		padding-right: 5rpx;
+		border-style: solid;
+		border-radius: 5px;
+		border-color: #65654b;
+		border-width: 3rpx;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		height: 256rpx;
+		font-size: 18rpx;
+	}
+
+	.dish-image {
+		padding-left: 5rpx;
+		padding-right: 5rpx;
+		border-style: solid;
+		border-radius: 5px;
+		border-color: #65654b;
+		border-width: 3rpx;
+		width: 475rpx;
+		height: 256rpx;
+		display: flex;
+	}
+</style>
\ No newline at end of file
diff --git a/uni_modules/uni-search-bar/changelog.md b/uni_modules/uni-search-bar/changelog.md
new file mode 100644
index 0000000..b41fdd3
--- /dev/null
+++ b/uni_modules/uni-search-bar/changelog.md
@@ -0,0 +1,33 @@
+## 1.2.3（2022-05-24）
+- 新增 readonly 属性，组件只读
+## 1.2.2（2022-05-06）
+- 修复  vue3 input 事件不生效的bug
+## 1.2.1（2022-05-06）
+- 修复 多余代码导致的bug
+## 1.2.0（2021-11-19）
+- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
+- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-search-bar](https://uniapp.dcloud.io/component/uniui/uni-search-bar)
+## 1.1.2（2021-08-30）
+- 修复 value 属性与 modelValue 属性不兼容的Bug
+## 1.1.1（2021-08-24）
+- 新增 支持国际化
+## 1.1.0（2021-07-30）
+- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
+## 1.0.9（2021-05-12）
+- 新增 项目示例地址
+## 1.0.8（2021-04-21）
+- 优化 添加依赖 uni-icons, 导入后自动下载依赖
+## 1.0.7（2021-04-15）
+- uni-ui 新增 uni-search-bar 的 focus 事件
+
+## 1.0.6（2021-02-05）
+- 优化 组件引用关系，通过uni_modules引用组件
+
+## 1.0.5（2021-02-05）
+- 调整为uni_modules目录规范
+- 新增 支持双向绑定
+- 更改 input 事件的返回值，e={value:Number} --> e=value
+- 新增 支持图标插槽
+- 新增 支持 clear、blur 事件
+- 新增 支持 focus 属性
+- 去掉组件背景色
diff --git a/uni_modules/uni-search-bar/components/uni-search-bar/i18n/en.json b/uni_modules/uni-search-bar/components/uni-search-bar/i18n/en.json
new file mode 100644
index 0000000..dd083a5
--- /dev/null
+++ b/uni_modules/uni-search-bar/components/uni-search-bar/i18n/en.json
@@ -0,0 +1,4 @@
+{
+	"uni-search-bar.cancel": "cancel",
+	"uni-search-bar.placeholder": "Search enter content"
+}
\ No newline at end of file
diff --git a/uni_modules/uni-search-bar/components/uni-search-bar/i18n/index.js b/uni_modules/uni-search-bar/components/uni-search-bar/i18n/index.js
new file mode 100644
index 0000000..de7509c
--- /dev/null
+++ b/uni_modules/uni-search-bar/components/uni-search-bar/i18n/index.js
@@ -0,0 +1,8 @@
+import en from './en.json'
+import zhHans from './zh-Hans.json'
+import zhHant from './zh-Hant.json'
+export default {
+	en,
+	'zh-Hans': zhHans,
+	'zh-Hant': zhHant
+}
diff --git a/uni_modules/uni-search-bar/components/uni-search-bar/i18n/zh-Hans.json b/uni_modules/uni-search-bar/components/uni-search-bar/i18n/zh-Hans.json
new file mode 100644
index 0000000..d4e5c12
--- /dev/null
+++ b/uni_modules/uni-search-bar/components/uni-search-bar/i18n/zh-Hans.json
@@ -0,0 +1,4 @@
+{
+	"uni-search-bar.cancel": "cancel",
+	"uni-search-bar.placeholder": "请输入搜索内容"
+}
diff --git a/uni_modules/uni-search-bar/components/uni-search-bar/i18n/zh-Hant.json b/uni_modules/uni-search-bar/components/uni-search-bar/i18n/zh-Hant.json
new file mode 100644
index 0000000..318b6ef
--- /dev/null
+++ b/uni_modules/uni-search-bar/components/uni-search-bar/i18n/zh-Hant.json
@@ -0,0 +1,4 @@
+{
+	"uni-search-bar.cancel": "cancel",
+	"uni-search-bar.placeholder": "請輸入搜索內容"
+}
diff --git a/uni_modules/uni-search-bar/components/uni-search-bar/uni-search-bar.vue b/uni_modules/uni-search-bar/components/uni-search-bar/uni-search-bar.vue
new file mode 100644
index 0000000..44ca1a1
--- /dev/null
+++ b/uni_modules/uni-search-bar/components/uni-search-bar/uni-search-bar.vue
@@ -0,0 +1,298 @@
+<template>
+	<view class="uni-searchbar">
+		<view :style="{borderRadius:radius+'px',backgroundColor: bgColor}" class="uni-searchbar__box"
+			@click="searchClick">
+			<view class="uni-searchbar__box-icon-search">
+				<slot name="searchIcon">
+					<uni-icons color="#c0c4cc" size="18" type="search" />
+				</slot>
+			</view>
+			<input v-if="show || searchVal" :focus="showSync" :disabled="readonly" :placeholder="placeholderText" :maxlength="maxlength"
+				class="uni-searchbar__box-search-input" confirm-type="search" type="text" v-model="searchVal"
+				@confirm="confirm" @blur="blur" @focus="emitFocus" />
+			<text v-else class="uni-searchbar__text-placeholder">{{ placeholder }}</text>
+			<view v-if="show && (clearButton==='always'||clearButton==='auto'&&searchVal!=='') &&!readonly"
+				class="uni-searchbar__box-icon-clear" @click="clear">
+				<slot name="clearIcon">
+					<uni-icons color="#c0c4cc" size="20" type="clear" />
+				</slot>
+			</view>
+		</view>
+		<text @click="cancel" class="uni-searchbar__cancel"
+			v-if="cancelButton ==='always' || show && cancelButton ==='auto'">{{cancelTextI18n}}</text>
+	</view>
+</template>
+
+<script>
+	import {
+		initVueI18n
+	} from '@dcloudio/uni-i18n'
+	import messages from './i18n/index.js'
+	const {
+		t
+	} = initVueI18n(messages)
+
+	/**
+	 * SearchBar 搜索栏
+	 * @description 搜索栏组件，通常用于搜索商品、文章等
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=866
+	 * @property {Number} radius 搜索栏圆角
+	 * @property {Number} maxlength 输入最大长度
+	 * @property {String} placeholder 搜索栏Placeholder
+	 * @property {String} clearButton = [always|auto|none] 是否显示清除按钮
+	 * 	@value always 一直显示
+	 * 	@value auto 输入框不为空时显示
+	 * 	@value none 一直不显示
+	 * @property {String} cancelButton = [always|auto|none] 是否显示取消按钮
+	 * 	@value always 一直显示
+	 * 	@value auto 输入框不为空时显示
+	 * 	@value none 一直不显示
+	 * @property {String} cancelText 取消按钮的文字
+	 * @property {String} bgColor 输入框背景颜色
+	 * @property {Boolean} focus 是否自动聚焦
+	 * @property {Boolean} readonly 组件只读，不能有任何操作，只做展示
+	 * @event {Function} confirm uniSearchBar 的输入框 confirm 事件，返回参数为uniSearchBar的value，e={value:Number}
+	 * @event {Function} input uniSearchBar 的 value 改变时触发事件，返回参数为uniSearchBar的value，e=value
+	 * @event {Function} cancel 点击取消按钮时触发事件，返回参数为uniSearchBar的value，e={value:Number}
+	 * @event {Function} clear 点击清除按钮时触发事件，返回参数为uniSearchBar的value，e={value:Number}
+	 * @event {Function} blur input失去焦点时触发事件，返回参数为uniSearchBar的value，e={value:Number}
+	 */
+
+	export default {
+		name: "UniSearchBar",
+		emits: ['input', 'update:modelValue', 'clear', 'cancel', 'confirm', 'blur', 'focus'],
+		props: {
+			placeholder: {
+				type: String,
+				default: ""
+			},
+			radius: {
+				type: [Number, String],
+				default: 5
+			},
+			clearButton: {
+				type: String,
+				default: "auto"
+			},
+			cancelButton: {
+				type: String,
+				default: "auto"
+			},
+			cancelText: {
+				type: String,
+				default: '取消'
+			},
+			bgColor: {
+				type: String,
+				default: "#F8F8F8"
+			},
+			maxlength: {
+				type: [Number, String],
+				default: 100
+			},
+			value: {
+				type: [Number, String],
+				default: ""
+			},
+			modelValue: {
+				type: [Number, String],
+				default: ""
+			},
+			focus: {
+				type: Boolean,
+				default: false
+			},
+			readonly: {
+				type: Boolean,
+				default: false
+			}
+		},
+		data() {
+			return {
+				show: false,
+				showSync: false,
+				searchVal: ''
+			}
+		},
+		computed: {
+			cancelTextI18n() {
+				return this.cancelText || t("uni-search-bar.cancel")
+			},
+			placeholderText() {
+				return this.placeholder || t("uni-search-bar.placeholder")
+			}
+		},
+		watch: {
+			// #ifndef VUE3
+			value: {
+				immediate: true,
+				handler(newVal) {
+					this.searchVal = newVal
+					if (newVal) {
+						this.show = true
+					}
+				}
+			},
+			// #endif
+			// #ifdef VUE3
+			modelValue: {
+				immediate: true,
+				handler(newVal) {
+					this.searchVal = newVal
+					if (newVal) {
+						this.show = true
+					}
+				}
+			},
+			// #endif
+			focus: {
+				immediate: true,
+				handler(newVal) {
+					if (newVal) {
+						if(this.readonly) return
+						this.show = true;
+						this.$nextTick(() => {
+							this.showSync = true
+						})
+					}
+				}
+			},
+			searchVal(newVal, oldVal) {
+				this.$emit("input", newVal)
+				// #ifdef VUE3
+				this.$emit("update:modelValue", newVal)
+				// #endif
+			}
+		},
+		methods: {
+			searchClick() {
+				if(this.readonly) return
+				if (this.show) {
+					return
+				}
+				this.show = true;
+				this.$nextTick(() => {
+					this.showSync = true
+				})
+			},
+			clear() {
+				this.$emit("clear", {
+					value: this.searchVal
+				})
+				this.searchVal = ""
+			},
+			cancel() {
+				if(this.readonly) return
+				this.$emit("cancel", {
+					value: this.searchVal
+				});
+				this.searchVal = ""
+				this.show = false
+				this.showSync = false
+				// #ifndef APP-PLUS
+				uni.hideKeyboard()
+				// #endif
+				// #ifdef APP-PLUS
+				plus.key.hideSoftKeybord()
+				// #endif
+			},
+			confirm() {
+				// #ifndef APP-PLUS
+				uni.hideKeyboard();
+				// #endif
+				// #ifdef APP-PLUS
+				plus.key.hideSoftKeybord()
+				// #endif
+				this.$emit("confirm", {
+					value: this.searchVal
+				})
+			},
+			blur() {
+				// #ifndef APP-PLUS
+				uni.hideKeyboard();
+				// #endif
+				// #ifdef APP-PLUS
+				plus.key.hideSoftKeybord()
+				// #endif
+				this.$emit("blur", {
+					value: this.searchVal
+				})
+			},
+			emitFocus(e) {
+				this.$emit("focus", e.detail)
+			}
+		}
+	};
+</script>
+
+<style lang="scss">
+	$uni-searchbar-height: 36px;
+
+	.uni-searchbar {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		position: relative;
+		padding: 10px;
+		background-color: #efefef;
+	}
+
+	.uni-searchbar__box {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		box-sizing: border-box;
+		/* #endif */
+		overflow: hidden;
+		position: relative;
+		flex: 1;
+		justify-content: center;
+		flex-direction: row;
+		align-items: center;
+		height: $uni-searchbar-height;
+		padding: 5px 8px 5px 0px;
+	}
+
+	.uni-searchbar__box-icon-search {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		// width: 32px;
+		padding: 0 8px;
+		justify-content: center;
+		align-items: center;
+		color: #B3B3B3;
+	}
+
+	.uni-searchbar__box-search-input {
+		flex: 1;
+		font-size: 14px;
+		color: #333;
+	}
+
+	.uni-searchbar__box-icon-clear {
+		align-items: center;
+		line-height: 24px;
+		padding-left: 8px;
+		/* #ifdef H5 */
+		cursor: pointer;
+		/* #endif */
+	}
+
+	.uni-searchbar__text-placeholder {
+		font-size: 14px;
+		color: #B3B3B3;
+		margin-left: 5px;
+	}
+
+	.uni-searchbar__cancel {
+		padding-left: 10px;
+		line-height: $uni-searchbar-height;
+		font-size: 14px;
+		color: #333333;
+		/* #ifdef H5 */
+		cursor: pointer;
+		/* #endif */
+	}
+</style>
diff --git a/uni_modules/uni-search-bar/package.json b/uni_modules/uni-search-bar/package.json
new file mode 100644
index 0000000..9352c57
--- /dev/null
+++ b/uni_modules/uni-search-bar/package.json
@@ -0,0 +1,89 @@
+{
+  "id": "uni-search-bar",
+  "displayName": "uni-search-bar 搜索栏",
+  "version": "1.2.3",
+  "description": "搜索栏组件，通常用于搜索商品、文章等",
+  "keywords": [
+    "uni-ui",
+    "uniui",
+    "搜索框",
+    "搜索栏"
+],
+  "repository": "https://github.com/dcloudio/uni-ui",
+  "engines": {
+    "HBuilderX": ""
+  },
+  "directories": {
+    "example": "../../temps/example_temps"
+  },
+  "dcloudext": {
+    "category": [
+      "前端组件",
+      "通用组件"
+    ],
+    "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": [
+			"uni-scss",
+			"uni-icons"
+		],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y"
+      },
+      "client": {
+        "App": {
+          "app-vue": "y",
+          "app-nvue": "y"
+        },
+        "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"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        },
+        "Vue": {
+            "vue2": "y",
+            "vue3": "y"
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/uni_modules/uni-search-bar/readme.md b/uni_modules/uni-search-bar/readme.md
new file mode 100644
index 0000000..253092f
--- /dev/null
+++ b/uni_modules/uni-search-bar/readme.md
@@ -0,0 +1,14 @@
+
+
+## SearchBar 搜索栏
+
+> **组件名：uni-search-bar**
+> 代码块： `uSearchBar`
+
+
+搜索栏组件
+
+### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-search-bar)
+#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 
+
+
diff --git a/uni_modules/uni-tag/changelog.md b/uni_modules/uni-tag/changelog.md
new file mode 100644
index 0000000..c0c5839
--- /dev/null
+++ b/uni_modules/uni-tag/changelog.md
@@ -0,0 +1,21 @@
+## 2.1.0（2021-11-19）
+- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
+- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-tag](https://uniapp.dcloud.io/component/uniui/uni-tag)
+## 2.0.0（2021-11-09）
+- 新增 提供组件设计资源，组件样式调整
+- 移除 插槽
+- 移除 type 属性的 royal 选项
+## 1.1.1（2021-08-11）
+- type 不是 default 时，size 为 small 字体大小显示不正确
+## 1.1.0（2021-07-30）
+- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
+## 1.0.7（2021-06-18）
+- 修复 uni-tag 在字节跳动小程序上 css 类名编译错误的 bug
+## 1.0.6（2021-06-04）
+- 修复 未定义 sass 变量 "$uni-color-royal" 的bug
+## 1.0.5（2021-05-10）
+- 修复 royal 类型无效的bug
+- 修复 uni-tag 宽度不自适应的bug
+- 新增 uni-tag 支持属性 custom-style 自定义样式
+## 1.0.4（2021-02-05）
+- 调整为uni_modules目录规范
diff --git a/uni_modules/uni-tag/components/uni-tag/uni-tag.vue b/uni_modules/uni-tag/components/uni-tag/uni-tag.vue
new file mode 100644
index 0000000..6378a0b
--- /dev/null
+++ b/uni_modules/uni-tag/components/uni-tag/uni-tag.vue
@@ -0,0 +1,252 @@
+<template>
+	<text class="uni-tag" v-if="text" :class="classes" :style="customStyle" @click="onClick">{{text}}</text>
+</template>
+
+<script>
+	/**
+	 * Tag 标签
+	 * @description 用于展示1个或多个文字标签，可点击切换选中、不选中的状态
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=35
+	 * @property {String} text 标签内容
+	 * @property {String} size = [default|small|mini] 大小尺寸
+	 * 	@value default 正常
+	 * 	@value small 小尺寸
+	 * 	@value mini 迷你尺寸
+	 * @property {String} type = [default|primary|success｜warning｜error]  颜色类型
+	 * 	@value default 灰色
+	 * 	@value primary 蓝色
+	 * 	@value success 绿色
+	 * 	@value warning 黄色
+	 * 	@value error 红色
+	 * @property {Boolean} disabled = [true|false] 是否为禁用状态
+	 * @property {Boolean} inverted = [true|false] 是否无需背景颜色（空心标签）
+	 * @property {Boolean} circle = [true|false] 是否为圆角
+	 * @event {Function} click 点击 Tag 触发事件
+	 */
+
+	export default {
+		name: "UniTag",
+		emits: ['click'],
+		props: {
+			type: {
+				// 标签类型default、primary、success、warning、error、royal
+				type: String,
+				default: "default"
+			},
+			size: {
+				// 标签大小 normal, small
+				type: String,
+				default: "normal"
+			},
+			// 标签内容
+			text: {
+				type: String,
+				default: ""
+			},
+			disabled: {
+				// 是否为禁用状态
+				type: [Boolean, String],
+				default: false
+			},
+			inverted: {
+				// 是否为空心
+				type: [Boolean, String],
+				default: false
+			},
+			circle: {
+				// 是否为圆角样式
+				type: [Boolean, String],
+				default: false
+			},
+			mark: {
+				// 是否为标记样式
+				type: [Boolean, String],
+				default: false
+			},
+			customStyle: {
+				type: String,
+				default: ''
+			}
+		},
+		computed: {
+			classes() {
+				const {
+					type,
+					disabled,
+					inverted,
+					circle,
+					mark,
+					size,
+					isTrue
+				} = this
+				const classArr = [
+					'uni-tag--' + type,
+					'uni-tag--' + size,
+					isTrue(disabled) ? 'uni-tag--disabled' : '',
+					isTrue(inverted) ? 'uni-tag--' + type + '--inverted' : '',
+					isTrue(circle) ? 'uni-tag--circle' : '',
+					isTrue(mark) ? 'uni-tag--mark' : '',
+					// type === 'default' ? 'uni-tag--default' : 'uni-tag-text',
+					isTrue(inverted) ? 'uni-tag--inverted uni-tag-text--' + type : '',
+					size === 'small' ? 'uni-tag-text--small' : ''
+				]
+				// 返回类的字符串，兼容字节小程序
+				return classArr.join(' ')
+			}
+		},
+		methods: {
+			isTrue(value) {
+				return value === true || value === 'true'
+			},
+			onClick() {
+				if (this.isTrue(this.disabled)) return
+				this.$emit("click");
+			}
+		}
+	};
+</script>
+
+<style lang="scss">
+	$uni-primary: #2979ff !default;
+	$uni-success: #18bc37 !default;
+	$uni-warning: #f3a73f !default;
+	$uni-error: #e43d33 !default;
+	$uni-info: #8f939c !default;
+
+
+	$tag-default-pd: 4px 7px;
+	$tag-small-pd: 2px 5px;
+	$tag-mini-pd: 1px 3px;
+
+	.uni-tag {
+		line-height: 14px;
+		font-size: 12px;
+		font-weight: 200;
+		padding: $tag-default-pd;
+		color: #fff;
+		border-radius: 3px;
+		background-color: $uni-info;
+		border-width: 1rpx;
+		border-style: solid;
+		border-color: $uni-info;
+		/* #ifdef H5 */
+		cursor: pointer;
+		/* #endif */
+
+		// size attr
+		&--default {
+			font-size: 12px;
+		}
+
+		&--default--inverted {
+			color: $uni-info;
+			border-color: $uni-info;
+		}
+
+		&--small {
+			padding: $tag-small-pd;
+			font-size: 12px;
+			border-radius: 2px;
+		}
+
+		&--mini {
+			padding: $tag-mini-pd;
+			font-size: 12px;
+			border-radius: 2px;
+		}
+
+		// type attr
+		&--primary {
+			background-color: $uni-primary;
+			border-color: $uni-primary;
+			color: #fff;
+		}
+
+		&--success {
+			color: #fff;
+			background-color: $uni-success;
+			border-color: $uni-success;
+		}
+
+		&--warning {
+			color: #fff;
+			background-color: $uni-warning;
+			border-color: $uni-warning;
+		}
+
+		&--error {
+			color: #fff;
+			background-color: $uni-error;
+			border-color: $uni-error;
+		}
+
+		&--primary--inverted {
+			color: $uni-primary;
+			border-color: $uni-primary;
+		}
+
+		&--success--inverted {
+			color: $uni-success;
+			border-color: $uni-success;
+		}
+
+		&--warning--inverted {
+			color: $uni-warning;
+			border-color: $uni-warning;
+		}
+
+		&--error--inverted {
+			color: $uni-error;
+			border-color: $uni-error;
+		}
+
+		&--inverted {
+			background-color: #fff;
+		}
+
+		// other attr
+		&--circle {
+			border-radius: 15px !important;
+		}
+
+		&--mark {
+			border-top-left-radius: 0 !important;
+			border-bottom-left-radius: 0 !important;
+			border-top-right-radius: 15px !important;
+			border-bottom-right-radius: 15px !important;
+		}
+
+		&--disabled {
+			opacity: 0.5;
+			/* #ifdef H5 */
+			cursor: not-allowed;
+			/* #endif */
+		}
+	}
+
+
+	.uni-tag-text {
+		color: #fff;
+		font-size: 14px;
+
+		&--primary {
+			color: $uni-primary;
+		}
+
+		&--success {
+			color: $uni-success;
+		}
+
+		&--warning {
+			color: $uni-warning;
+		}
+
+		&--error {
+			color: $uni-error;
+		}
+
+		&--small {
+			font-size: 12px;
+		}
+	}
+</style>
diff --git a/uni_modules/uni-tag/package.json b/uni_modules/uni-tag/package.json
new file mode 100644
index 0000000..1878088
--- /dev/null
+++ b/uni_modules/uni-tag/package.json
@@ -0,0 +1,87 @@
+{
+  "id": "uni-tag",
+  "displayName": "uni-tag 标签",
+  "version": "2.1.0",
+  "description": "Tag 组件，用于展示1个或多个文字标签，可点击切换选中、不选中的状态。",
+  "keywords": [
+    "uni-ui",
+    "uniui",
+    "",
+    "tag",
+    "标签"
+],
+  "repository": "https://github.com/dcloudio/uni-ui",
+  "engines": {
+    "HBuilderX": ""
+  },
+  "directories": {
+    "example": "../../temps/example_temps"
+  },
+  "dcloudext": {
+    "category": [
+      "前端组件",
+      "通用组件"
+    ],
+    "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": ["uni-scss"],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y"
+      },
+      "client": {
+        "App": {
+          "app-vue": "y",
+          "app-nvue": "y"
+        },
+        "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"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        },
+        "Vue": {
+            "vue2": "y",
+            "vue3": "y"
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/uni_modules/uni-tag/readme.md b/uni_modules/uni-tag/readme.md
new file mode 100644
index 0000000..6e78ff5
--- /dev/null
+++ b/uni_modules/uni-tag/readme.md
@@ -0,0 +1,13 @@
+
+
+## Tag 标签
+> **组件名：uni-tag**
+> 代码块： `uTag`
+
+
+用于展示1个或多个文字标签，可点击切换选中、不选中的状态 。
+
+### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-tag)
+#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 
+
+