u
This commit is contained in:
oneao committed
1 parent
949cfa113b
commit
5d37c32081
1 file changed
+106
-137
+106
-137
@@ -1,161 +1,130 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>日期选择 Picker Demo</title>
|
||||
<link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css" />
|
||||
<meta charset="UTF-8" />
|
||||
<title>biz_key 私聊演示</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
padding: 20px;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
|
||||
Helvetica, Arial, sans-serif;
|
||||
background: #f5f7fa;
|
||||
padding: 40px;
|
||||
}
|
||||
.category-tabs {
|
||||
|
||||
h1 {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-bottom: 10px;
|
||||
flex-wrap: wrap;
|
||||
gap: 24px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.category-tab {
|
||||
padding: 6px 12px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
|
||||
.card {
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
width: 240px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
.category-tab.active {
|
||||
background-color: #409eff;
|
||||
color: white;
|
||||
border-color: #409eff;
|
||||
|
||||
.card h2 {
|
||||
font-size: 16px;
|
||||
margin-bottom: 12px;
|
||||
border-bottom: 1px solid #eee;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
.shortcut-options {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-top: 10px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.user {
|
||||
padding: 10px;
|
||||
margin-bottom: 8px;
|
||||
background: #f0f3f7;
|
||||
border-radius: 6px;
|
||||
}
|
||||
.shortcut-option {
|
||||
padding: 6px 12px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
|
||||
.arrow {
|
||||
font-size: 32px;
|
||||
margin: 0 8px;
|
||||
align-self: center;
|
||||
}
|
||||
.shortcut-option.active {
|
||||
background-color: #67c23a;
|
||||
color: white;
|
||||
border-color: #67c23a;
|
||||
|
||||
.biz {
|
||||
background: #e8f3ff;
|
||||
border: 1px dashed #409eff;
|
||||
padding: 12px;
|
||||
border-radius: 6px;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
color: #409eff;
|
||||
}
|
||||
|
||||
.db-row {
|
||||
background: #f6ffed;
|
||||
border: 1px solid #b7eb8f;
|
||||
padding: 10px;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 8px;
|
||||
font-family: monospace;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.note {
|
||||
margin-top: 24px;
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<h2>日期选择器 Demo</h2>
|
||||
|
||||
<!-- 分类标签 -->
|
||||
<div class="category-tabs">
|
||||
<div
|
||||
v-for="cat in categories"
|
||||
:key="cat"
|
||||
class="category-tab"
|
||||
:class="{ active: selectedCategory === cat }"
|
||||
@click="selectCategory(cat)"
|
||||
>
|
||||
{{ cat }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 日期选择器 -->
|
||||
<el-date-picker
|
||||
v-model="dateValue"
|
||||
:type="pickerType"
|
||||
placeholder="请选择日期"
|
||||
:value-format="valueFormat"
|
||||
style="width: 100%;"
|
||||
></el-date-picker>
|
||||
<h1>biz_key 私聊唯一性演示</h1>
|
||||
|
||||
<!-- 快捷选项 -->
|
||||
<div class="shortcut-options">
|
||||
<div
|
||||
v-for="item in shortcuts"
|
||||
:key="item.label"
|
||||
class="shortcut-option"
|
||||
:class="{ active: activeShortcut === item.label }"
|
||||
@click="applyShortcut(item)"
|
||||
>
|
||||
{{ item.label }}
|
||||
<div class="container">
|
||||
<!-- 用户 -->
|
||||
<div class="card">
|
||||
<h2>用户</h2>
|
||||
<div class="user">用户 A<br />user_id = 1</div>
|
||||
<div class="user">用户 B<br />user_id = 2</div>
|
||||
</div>
|
||||
|
||||
<div class="arrow">➡️</div>
|
||||
|
||||
<!-- biz_key -->
|
||||
<div class="card">
|
||||
<h2>biz_key 生成</h2>
|
||||
<div class="biz">
|
||||
min(1,2) _ max(1,2)<br />
|
||||
= <br />
|
||||
<strong>1_2</strong>
|
||||
</div>
|
||||
<div class="note">
|
||||
不管 A→B 还是 B→A<br />
|
||||
biz_key 都是一样的
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="margin-top: 20px;">
|
||||
<strong>选择的值:</strong> {{ dateValue }}
|
||||
<div class="arrow">➡️</div>
|
||||
|
||||
<!-- 数据库 -->
|
||||
<div class="card">
|
||||
<h2>数据库会话表</h2>
|
||||
<div class="db-row">
|
||||
id: 1001<br />
|
||||
space_id: 100<br />
|
||||
type: 私聊<br />
|
||||
biz_key: 1_2
|
||||
</div>
|
||||
<div class="note">
|
||||
唯一索引：<br />
|
||||
(space_id, type, biz_key)
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
|
||||
<script src="https://unpkg.com/element-plus/dist/index.full.js"></script>
|
||||
<script>
|
||||
const { createApp, ref } = Vue
|
||||
const { ElDatePicker } = ElementPlus
|
||||
|
||||
createApp({
|
||||
setup() {
|
||||
const categories = ['日', '月', '年', '时间', '日期', '范围', '不限']
|
||||
const selectedCategory = ref('日')
|
||||
const dateValue = ref(null)
|
||||
const activeShortcut = ref(null)
|
||||
|
||||
const shortcuts = [
|
||||
{ label: '今天', getValue: () => new Date() },
|
||||
{ label: '本月', getValue: () => {
|
||||
const now = new Date()
|
||||
return [new Date(now.getFullYear(), now.getMonth(), 1), new Date(now.getFullYear(), now.getMonth() + 1, 0)]
|
||||
}},
|
||||
{ label: '本年', getValue: () => {
|
||||
const now = new Date()
|
||||
return [new Date(now.getFullYear(), 0, 1), new Date(now.getFullYear(), 11, 31)]
|
||||
}},
|
||||
]
|
||||
|
||||
const pickerType = Vue.computed(() => {
|
||||
switch(selectedCategory.value){
|
||||
case '日': return 'date'
|
||||
case '月': return 'month'
|
||||
case '年': return 'year'
|
||||
case '时间': return 'time'
|
||||
case '日期': return 'date'
|
||||
case '范围': return 'daterange'
|
||||
case '不限': return 'date'
|
||||
default: return 'date'
|
||||
}
|
||||
})
|
||||
|
||||
const valueFormat = Vue.computed(() => {
|
||||
switch(selectedCategory.value){
|
||||
case '日': return 'yyyy-MM-dd'
|
||||
case '月': return 'yyyy-MM'
|
||||
case '年': return 'yyyy'
|
||||
case '时间': return 'HH:mm:ss'
|
||||
case '日期': return 'yyyy-MM-dd'
|
||||
case '范围': return 'yyyy-MM-dd'
|
||||
case '不限': return 'yyyy-MM-dd'
|
||||
default: return 'yyyy-MM-dd'
|
||||
}
|
||||
})
|
||||
|
||||
function selectCategory(cat) {
|
||||
selectedCategory.value = cat
|
||||
dateValue.value = null
|
||||
activeShortcut.value = null
|
||||
}
|
||||
|
||||
function applyShortcut(item) {
|
||||
activeShortcut.value = item.label
|
||||
dateValue.value = item.getValue()
|
||||
}
|
||||
|
||||
return { categories, selectedCategory, dateValue, pickerType, valueFormat, shortcuts, activeShortcut, selectCategory, applyShortcut }
|
||||
}
|
||||
}).use(ElementPlus).mount('#app')
|
||||
</script>
|
||||
<div class="note">
|
||||
👉 结论：<br />
|
||||
<strong>biz_key = “这是谁和谁的私聊”</strong><br />
|
||||
<strong>id = “数据库给它的编号”</strong>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in new issue
Block a user