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>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="zh-CN">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8" />
|
||||||
<title>日期选择 Picker Demo</title>
|
<title>biz_key 私聊演示</title>
|
||||||
<link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css" />
|
|
||||||
<style>
|
<style>
|
||||||
body {
|
body {
|
||||||
font-family: sans-serif;
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
|
||||||
padding: 20px;
|
Helvetica, Arial, sans-serif;
|
||||||
|
background: #f5f7fa;
|
||||||
|
padding: 40px;
|
||||||
}
|
}
|
||||||
.category-tabs {
|
|
||||||
|
h1 {
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 10px;
|
gap: 24px;
|
||||||
margin-bottom: 10px;
|
align-items: flex-start;
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
}
|
||||||
.category-tab {
|
|
||||||
padding: 6px 12px;
|
.card {
|
||||||
border: 1px solid #ccc;
|
background: #fff;
|
||||||
border-radius: 4px;
|
border-radius: 8px;
|
||||||
cursor: pointer;
|
padding: 16px;
|
||||||
transition: all 0.2s;
|
width: 240px;
|
||||||
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
||||||
}
|
}
|
||||||
.category-tab.active {
|
|
||||||
background-color: #409eff;
|
.card h2 {
|
||||||
color: white;
|
font-size: 16px;
|
||||||
border-color: #409eff;
|
margin-bottom: 12px;
|
||||||
|
border-bottom: 1px solid #eee;
|
||||||
|
padding-bottom: 8px;
|
||||||
}
|
}
|
||||||
.shortcut-options {
|
|
||||||
display: flex;
|
.user {
|
||||||
gap: 10px;
|
padding: 10px;
|
||||||
margin-top: 10px;
|
margin-bottom: 8px;
|
||||||
flex-wrap: wrap;
|
background: #f0f3f7;
|
||||||
|
border-radius: 6px;
|
||||||
}
|
}
|
||||||
.shortcut-option {
|
|
||||||
padding: 6px 12px;
|
.arrow {
|
||||||
border: 1px solid #ccc;
|
font-size: 32px;
|
||||||
border-radius: 4px;
|
margin: 0 8px;
|
||||||
cursor: pointer;
|
align-self: center;
|
||||||
transition: all 0.2s;
|
|
||||||
}
|
}
|
||||||
.shortcut-option.active {
|
|
||||||
background-color: #67c23a;
|
.biz {
|
||||||
color: white;
|
background: #e8f3ff;
|
||||||
border-color: #67c23a;
|
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>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="app">
|
<h1>biz_key 私聊唯一性演示</h1>
|
||||||
<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>
|
|
||||||
|
|
||||||
<!-- 快捷选项 -->
|
<div class="container">
|
||||||
<div class="shortcut-options">
|
<!-- 用户 -->
|
||||||
<div
|
<div class="card">
|
||||||
v-for="item in shortcuts"
|
<h2>用户</h2>
|
||||||
:key="item.label"
|
<div class="user">用户 A<br />user_id = 1</div>
|
||||||
class="shortcut-option"
|
<div class="user">用户 B<br />user_id = 2</div>
|
||||||
:class="{ active: activeShortcut === item.label }"
|
</div>
|
||||||
@click="applyShortcut(item)"
|
|
||||||
>
|
<div class="arrow">➡️</div>
|
||||||
{{ item.label }}
|
|
||||||
|
<!-- 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>
|
</div>
|
||||||
|
|
||||||
<div style="margin-top: 20px;">
|
<div class="arrow">➡️</div>
|
||||||
<strong>选择的值:</strong> {{ dateValue }}
|
|
||||||
|
<!-- 数据库 -->
|
||||||
|
<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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
|
<div class="note">
|
||||||
<script src="https://unpkg.com/element-plus/dist/index.full.js"></script>
|
👉 结论：<br />
|
||||||
<script>
|
<strong>biz_key = “这是谁和谁的私聊”</strong><br />
|
||||||
const { createApp, ref } = Vue
|
<strong>id = “数据库给它的编号”</strong>
|
||||||
const { ElDatePicker } = ElementPlus
|
</div>
|
||||||
|
|
||||||
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>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
Reference in new issue
Block a user