AI-app/pages/index/leftDrawer/index.vue

<template>
  <view>
    <uni-popup
      ref="popup"
      background-color="#fff"
      type="left"
      class="history-popup"
      @change="changeShow"
    >
      <view class="drawer-mask">
        <view class="drawer">
          <scroll-view class="drawer-scroll" scroll-y show-scrollbar="false">
            <view v-for="g in historyGroups" :key="g.date" class="drawer-group">
              <view class="drawer-date">{{ g.date }}</view>
              <view
                v-for="(t, idx) in g.items"
                :key="idx"
                class="drawer-item overflow-one"
                @tap="onHistoryItemTap(t)"
                @longpress="onLongPressHistory(t)"
              >
                {{ t }}
              </view>
              <view class="drawer-divider" />
            </view>
          </scroll-view>
          <view class="drawer-footer">
            <view class="user-icon">👤</view>
            <text class="user-name">用户<E794A8> </text>
            <view class="footer-gear" @tap="clearAllHistory">⚙️</view>
          </view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
export default {
    props : {
        historyGroups : {
            type : Array,
            default() {
                return []
            }
        }
    },
    methods : {
        onHistoryItemTap(text){
            this.$emit('onHistoryItemTap',text)
        },
      
       onLongPressHistory(text) {
       		uni.showModal({
       		title: "删除记录",
       		content: "确定删除这条对话记录？",
       		success: (res) => {
       			if (res.confirm) {
					this.$emit('removeFromHistory',text)
       			}
       		},
       	});
       },
        close() {
            this.$refs.popup.close()
        },
        open() {
            this.$refs.popup.open()
        },
        changeShow(e) {
            this.$emit('changeShow',e.show)
        },
		clearAllHistory(){
			 this.$emit('clearAllHistory')
		}
    }
};
</script>

<style lang="scss" scoped>
	.history-popup{
		z-index: 99999;
	}

    .drawer-mask {
		width: 75vw;
		height: 100vh;
	}

	.drawer {
		width: 70vw;
		height: 100vh;
		background: #fff;
		border-top-right-radius: 8px;
		border-bottom-right-radius: 8px;
		display: flex;
		flex-direction: column;
	}

	.drawer.show {
		transform: translateX(0);
	}

	.drawer-scroll {
		height: calc(100vh - 64px);
		padding: 12px;
		box-sizing: border-box;
	}

	.drawer-group {
		padding: 10px 8px 0;
	}

	.drawer-date {
		color: #9aa3b2;
		font-size: 14px;
		margin-bottom: 8px;
	}

	.drawer-item {
		color: #333;
		font-size: 16px;
		line-height: 20px;
		margin: 12px 0;
	}

	.drawer-divider {
		height: 1px;
		background: #eeeeee;
		margin: 12px 0;
	}

	.drawer-footer {
		padding: 12px;
		border-top: 1px solid #eeeeee;
		display: flex;
		align-items: center;
	}

	.drawer-footer {
		/* fixed height for calc above */
		height: 64px;
	}

	.user-icon {
		width: 24px;
		text-align: center;
	}

	.user-name {
		flex: 1;
		font-size: 14px;
		color: #333;
	}

	.footer-gear {
		width: 24px;
		text-align: center;
	}
</style>