@@ -0,0 +1,292 @@
<!DOCTYPE html>
< html lang = "zh-CN" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title > 专家咨询·小助手 - 常用语 | 健康长庆原型< / title >
< style >
* { box-sizing : border-box ; margin : 0 ; padding : 0 ; }
body { font-family : - apple-system , BlinkMacSystemFont , 'PingFang SC' , 'Microsoft YaHei' , sans-serif ; background : #F5F7FA ; color : #333 ; min-width : 1280 px ; }
: root { --primary : #1890FF ; --primary-light : #E6F7FF ; --success : #52C41A ; --warning : #FAAD14 ; --danger : #FF4D4F ; --text-primary : #333 ; --text-secondary : #666 ; --border : #E8E8E8 ; --font-xs : 11 px ; --font-sm : 13 px ; --font-base : 15 px ; --font-lg : 17 px ; --font-xl : 20 px ; --radius-sm : 4 px ; --radius-md : 8 px ; --shadow-sm : 0 1 px 4 px rgba ( 0 , 0 , 0 , 0.08 ) ; }
. top-bar { display : flex ; align-items : center ; height : 56 px ; background : #001529 ; padding : 0 24 px ; position : fixed ; top : 0 ; left : 0 ; right : 0 ; z-index : 100 ; }
. top-bar__logo { display : flex ; align-items : center ; gap : 8 px ; color : #fff ; font-size : var ( - - font - lg ) ; font-weight : 600 ; width : 240 px ; flex-shrink : 0 ; white-space : nowrap ; }
. top-bar__logo svg { width : 28 px ; height : 28 px ; }
. top-bar__nav { display : flex ; align-items : center ; gap : 4 px ; flex : 1 ; }
. top-bar__nav a { color : rgba ( 255 , 255 , 255 , 0.65 ) ; text-decoration : none ; padding : 6 px 16 px ; border-radius : var ( - - radius - sm ) ; font-size : var ( - - font - sm ) ; transition : all .2 s ; }
. top-bar__nav a : hover { color : #fff ; background : rgba ( 255 , 255 , 255 , 0.08 ) ; }
. top-bar__nav a . active { color : #fff ; background : var ( - - primary ) ; }
. top-bar__right { display : flex ; align-items : center ; gap : 16 px ; font-size : var ( - - font - sm ) ; margin-left : auto ; }
. btn-back { color : rgba ( 255 , 255 , 255 , 0.65 ) ; cursor : pointer ; display : flex ; align-items : center ; gap : 4 px ; text-decoration : none ; } . btn-back : hover { color : #fff ; }
. avatar { width : 32 px ; height : 32 px ; border-radius : 50 % ; background : var ( - - success ) ; display : flex ; align-items : center ; justify-content : center ; color : #fff ; font-size : var ( - - font - sm ) ; }
. main { margin-top : 56 px ; padding : 24 px ; }
. filter-bar { background : #fff ; border-radius : var ( - - radius - md ) ; padding : 20 px 24 px ; margin-bottom : 16 px ; box-shadow : var ( - - shadow - sm ) ; display : flex ; align-items : center ; gap : 16 px ; flex-wrap : wrap ; }
. filter-item { display : flex ; align-items : center ; gap : 8 px ; }
. filter-item label { font-size : var ( - - font - sm ) ; color : var ( - - text - secondary ) ; white-space : nowrap ; }
. filter-input { height : 36 px ; border : 1 px solid var ( - - border ) ; border-radius : var ( - - radius - sm ) ; padding : 0 12 px ; font-size : var ( - - font - sm ) ; outline : none ; background : #fff ; min-width : 240 px ; }
. filter-input : focus { border-color : var ( - - primary ) ; }
. filter-select { height : 36 px ; border : 1 px solid var ( - - border ) ; border-radius : var ( - - radius - sm ) ; padding : 0 28 px 0 12 px ; font-size : var ( - - font - sm ) ; outline : none ; background : #fff url ( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E" ) no-repeat right 10 px center ; appearance : none ; min-width : 140 px ; }
. btn { height : 36 px ; padding : 0 16 px ; border-radius : var ( - - radius - sm ) ; font-size : var ( - - font - sm ) ; cursor : pointer ; border : none ; transition : all .2 s ; display : inline-flex ; align-items : center ; gap : 6 px ; }
. btn-primary { background : var ( - - primary ) ; color : #fff ; } . btn-primary : hover { background : #40a9ff ; }
. btn-default { background : #fff ; color : var ( - - text - primary ) ; border : 1 px solid var ( - - border ) ; } . btn-default : hover { color : var ( - - primary ) ; border-color : var ( - - primary ) ; }
. btn-success { background : var ( - - success ) ; color : #fff ; } . btn-success : hover { background : #73d13d ; }
. table-card { background : #fff ; border-radius : var ( - - radius - md ) ; box-shadow : var ( - - shadow - sm ) ; overflow : hidden ; }
. table-card__header { display : flex ; align-items : center ; justify-content : space-between ; padding : 16 px 24 px ; border-bottom : 1 px solid var ( - - border ) ; }
. table-card__title { font-size : var ( - - font - base ) ; font-weight : 600 ; }
. table-card__content { overflow-x : auto ; overflow-y : hidden ; }
. table-card__content table { min-width : 100 % ; white-space : nowrap ; }
. col-fixed { position : sticky ; z-index : 2 ; background : #fff ; }
thead . col-fixed { background : #FAFAFA ; z-index : 3 ; }
. col-fixed-1 { left : 0 ; min-width : 60 px ; width : 60 px ; }
. col-fixed-2 { left : 60 px ; }
. col-fixed-3 { left : 280 px ; }
. col-fixed-end { right : 0 ; min-width : 120 px ; box-shadow : -2 px 0 4 px rgba ( 0 , 0 , 0 , 0.04 ) ; }
. col-fixed-3 :: after { content : '' ; position : absolute ; top : 0 ; right : -4 px ; bottom : 0 ; width : 4 px ; background : linear-gradient ( to right , rgba ( 0 , 0 , 0 , 0.04 ) , transparent ) ; pointer-events : none ; }
table { width : 100 % ; border-collapse : collapse ; }
thead th { background : #FAFAFA ; padding : 12 px 16 px ; text-align : left ; font-size : var ( - - font - sm ) ; color : var ( - - text - secondary ) ; font-weight : 500 ; border-bottom : 1 px solid var ( - - border ) ; white-space : nowrap ; }
tbody td { padding : 14 px 16 px ; font-size : var ( - - font - sm ) ; border-bottom : 1 px solid var ( - - border ) ; vertical-align : top ; white-space : nowrap ; }
tbody tr : last-child td { border-bottom : none ; }
tbody tr : hover { background : #F8FBFF ; }
. tag { display : inline-flex ; align-items : center ; padding : 2 px 8 px ; border-radius : 10 px ; font-size : var ( - - font - xs ) ; }
. tag-blue { background : var ( - - primary - light ) ; color : var ( - - primary ) ; }
. tag-green { background : #F6FFED ; color : var ( - - success ) ; }
. phrase-text { max-width : 480 px ; line-height : 1.6 ; color : var ( - - text - primary ) ; }
. link { color : var ( - - primary ) ; cursor : pointer ; font-size : var ( - - font - sm ) ; } . link : hover { color : #40a9ff ; }
. link-danger { color : var ( - - danger ) ; cursor : pointer ; font-size : var ( - - font - sm ) ; }
. pagination { display : flex ; align-items : center ; justify-content : flex-end ; padding : 16 px 24 px ; gap : 8 px ; border-top : 1 px solid var ( - - border ) ; }
. pagination span { font-size : var ( - - font - sm ) ; color : var ( - - text - secondary ) ; }
. page-btn { width : 32 px ; height : 32 px ; border : 1 px solid var ( - - border ) ; border-radius : var ( - - radius - sm ) ; background : #fff ; cursor : pointer ; font-size : var ( - - font - sm ) ; display : inline-flex ; align-items : center ; justify-content : center ; transition : all .2 s ; }
. page-btn : hover , . page-btn . active { background : var ( - - primary ) ; color : #fff ; border-color : var ( - - primary ) ; }
. drawer-overlay { position : fixed ; top : 0 ; left : 0 ; right : 0 ; bottom : 0 ; background : rgba ( 0 , 0 , 0 , 0 ) ; z-index : 999 ; transition : background .3 s ; pointer-events : none ; }
. drawer-overlay . open { background : rgba ( 0 , 0 , 0 , 0.45 ) ; pointer-events : auto ; }
. drawer { position : fixed ; top : 0 ; right : -480 px ; bottom : 0 ; width : 480 px ; background : #fff ; box-shadow : -2 px 0 8 px rgba ( 0 , 0 , 0 , 0.15 ) ; z-index : 1000 ; transition : right .3 s ; display : flex ; flex-direction : column ; }
. drawer . open { right : 0 ; }
. drawer__header { display : flex ; align-items : center ; justify-content : space-between ; padding : 20 px 24 px ; border-bottom : 1 px solid var ( - - border ) ; flex-shrink : 0 ; }
. drawer__title { font-size : var ( - - font - lg ) ; font-weight : 600 ; }
. drawer__close { width : 32 px ; height : 32 px ; border-radius : 50 % ; border : none ; background : transparent ; cursor : pointer ; display : flex ; align-items : center ; justify-content : center ; color : var ( - - text - secondary ) ; font-size : 18 px ; }
. drawer__close : hover { background : #F5F5F5 ; }
. drawer__body { flex : 1 ; overflow-y : auto ; padding : 24 px ; }
. drawer__footer { display : flex ; justify-content : flex-end ; gap : 12 px ; padding : 16 px 24 px ; border-top : 1 px solid var ( - - border ) ; flex-shrink : 0 ; }
. form-item { margin-bottom : 20 px ; }
. form-label { font-size : var ( - - font - sm ) ; color : var ( - - text - secondary ) ; margin-bottom : 8 px ; display : flex ; align-items : center ; gap : 4 px ; font-weight : 500 ; }
. form-label . required { color : #FF4D4F ; }
. form-select { width : 100 % ; height : 40 px ; border : 1 px solid var ( - - border ) ; border-radius : var ( - - radius - sm ) ; padding : 0 28 px 0 12 px ; font-size : var ( - - font - sm ) ; outline : none ; background : #fff url ( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E" ) no-repeat right 10 px center ; appearance : none ; }
. form-input { width : 100 % ; height : 40 px ; border : 1 px solid var ( - - border ) ; border-radius : var ( - - radius - sm ) ; padding : 0 12 px ; font-size : var ( - - font - sm ) ; outline : none ; }
. form-textarea { width : 100 % ; height : 120 px ; border : 1 px solid var ( - - border ) ; border-radius : var ( - - radius - sm ) ; padding : 8 px 12 px ; font-size : var ( - - font - sm ) ; outline : none ; resize : none ; line-height : 1.6 ; }
. form-textarea : focus { border-color : var ( - - primary ) ; box-shadow : 0 0 0 2 px rgba ( 24 , 144 , 255 , 0.2 ) ; }
< / style >
< / head >
< body >
< div class = "top-bar" >
< div class = "top-bar__logo" > < svg viewBox = "0 0 28 28" fill = "none" > < rect width = "28" height = "28" rx = "6" fill = "#52C41A" / > < path d = "M9 14.5l3 3 7-7" stroke = "#fff" stroke-width = "2.5" stroke-linecap = "round" stroke-linejoin = "round" / > < / svg > 专家咨询–小助手< / div >
< nav class = "top-bar__nav" >
< a href = "current-consult.html" > 当前咨询< / a >
< a href = "chat-message.html" > 对话消息< / a >
< a href = "history-consult.html" > 历史咨询< / a >
< a href = "expert-manage.html" > 专家管理< / a >
< a href = "checkup-standard.html" > 体检标准化< / a >
< a href = "sms-send.html" > 短信发送< / a >
< a href = "config-phrase.html" class = "active" > 常用语< / a >
< a href = "consult-settle.html" > 咨询结算< / a >
< / nav >
< div class = "top-bar__right" >
< a class = "btn-back" href = "../../index.html" > < svg width = "16" height = "16" viewBox = "0 0 16 16" fill = "none" > < path d = "M10 3L5 8l5 5" stroke = "currentColor" stroke-width = "1.5" stroke-linecap = "round" / > < / svg > 返回首页< / a >
< div class = "avatar" > 助< / div > < span style = "color:rgba(255,255,255,0.65);" > 健康小助手 ▾< / span >
< / div >
< / div >
< div class = "drawer-overlay" id = "drawer-overlay" onclick = "closeDrawer()" > < / div >
< div class = "drawer" id = "drawer" >
< div class = "drawer__header" >
< div class = "drawer__title" id = "drawer-title" > 新增常用语< / div >
< button class = "drawer__close" onclick = "closeDrawer()" > ✕< / button >
< / div >
< div class = "drawer__body" >
< div class = "form-item" >
< div class = "form-label" > < span class = "required" > *< / span > 常用语内容< / div >
< textarea class = "form-textarea" placeholder = "请输入常用语内容..." > < / textarea >
< / div >
< div class = "form-item" >
< div class = "form-label" > < span class = "required" > *< / span > 分类< / div >
< select class = "form-select" >
< option value = "" > 请选择分类< / option >
< option > 问候语< / option >
< option > 引导语< / option >
< option > 结束语< / option >
< option > 注意事项< / option >
< option > 其他< / option >
< / select >
< / div >
< div class = "form-item" >
< div class = "form-label" > 排序序号< / div >
< input class = "form-input" type = "number" placeholder = "数字越小越靠前" value = "99" >
< / div >
< / div >
< div class = "drawer__footer" >
< button class = "btn btn-default" onclick = "closeDrawer()" > 取消< / button >
< button class = "btn btn-primary" > 确认保存< / button >
< / div >
< / div >
< main class = "main" >
< div class = "filter-bar" >
< div class = "filter-item" >
< label > 分类< / label >
< select class = "filter-select" >
< option > 全部分类< / option >
< option > 问候语< / option >
< option > 引导语< / option >
< option > 结束语< / option >
< option > 注意事项< / option >
< option > 其他< / option >
< / select >
< / div >
< div class = "filter-item" >
< label > 关键词< / label >
< input class = "filter-input" type = "text" placeholder = "搜索常用语内容" >
< / div >
< button class = "btn btn-primary" >
< svg width = "14" height = "14" viewBox = "0 0 14 14" fill = "none" > < circle cx = "6" cy = "6" r = "4" stroke = "currentColor" stroke-width = "1.4" / > < path d = "M10 10l2.5 2.5" stroke = "currentColor" stroke-width = "1.4" stroke-linecap = "round" / > < / svg >
查询
< / button >
< button class = "btn btn-default" > 重置< / button >
< / div >
< div style = "display:flex;gap:12px;margin-bottom:16px;" >
< button class = "btn btn-success" onclick = "openDrawer('add')" >
< svg width = "14" height = "14" viewBox = "0 0 14 14" fill = "none" > < path d = "M7 2v10M2 7h10" stroke = "currentColor" stroke-width = "1.8" stroke-linecap = "round" / > < / svg >
新增常用语
< / button >
< / div >
< div class = "table-card" >
< div class = "table-card__header" >
< div class = "table-card__title" > 常用语列表< / div >
< div style = "font-size:var(--font-sm);color:var(--text-secondary);" > 共 18 条< / div >
< / div >
< div class = "table-card__content" >
< table >
< thead >
< tr >
< th class = "col-fixed col-fixed-1" > 序号< / th >
< th class = "col-fixed col-fixed-2" > 常用语内容< / th >
< th class = "col-fixed col-fixed-3" > 分类< / th >
< th > 使用次数< / th >
< th > 创建时间< / th >
< th class = "col-fixed col-fixed-end" > 操作< / th >
< / tr >
< / thead >
< tbody >
< tr >
< td class = "col-fixed col-fixed-1" > 1< / td >
< td class = "col-fixed col-fixed-2" > < div class = "phrase-text" > 您好!我是健康咨询小助手,很高兴为您服务。请问您有什么健康问题需要咨询?< / div > < / td >
< td class = "col-fixed col-fixed-3" > < span class = "tag tag-blue" > 问候语< / span > < / td >
< td > 1,234< / td >
< td > 2025-06-01< / td >
< td class = "col-fixed col-fixed-end" >
< div style = "display:flex;gap:8px;" >
< span class = "link" onclick = "openDrawer('edit',this)" > 编辑< / span >
< span class = "link-danger" > 删除< / span >
< / div >
< / td >
< / tr >
< tr >
< td class = "col-fixed col-fixed-1" > 2< / td >
< td class = "col-fixed col-fixed-2" > < div class = "phrase-text" > 请您稍等,我正在为您转接专家,预计等待时间约3-5分钟。< / div > < / td >
< td class = "col-fixed col-fixed-3" > < span class = "tag tag-green" > 引导语< / span > < / td >
< td > 986< / td >
< td > 2025-06-15< / td >
< td class = "col-fixed col-fixed-end" >
< div style = "display:flex;gap:8px;" >
< span class = "link" onclick = "openDrawer('edit',this)" > 编辑< / span >
< span class = "link-danger" > 删除< / span >
< / div >
< / td >
< / tr >
< tr >
< td class = "col-fixed col-fixed-1" > 3< / td >
< td class = "col-fixed col-fixed-2" > < div class = "phrase-text" > 建议您尽快前往医院进行进一步检查,以便获得更准确的诊断和治疗方案。< / div > < / td >
< td class = "col-fixed col-fixed-3" > < span class = "tag tag-blue" > 注意事项< / span > < / td >
< td > 654< / td >
< td > 2025-07-15< / td >
< td class = "col-fixed col-fixed-end" >
< div style = "display:flex;gap:8px;" >
< span class = "link" onclick = "openDrawer('edit',this)" > 编辑< / span >
< span class = "link-danger" > 删除< / span >
< / div >
< / td >
< / tr >
< tr >
< td class = "col-fixed col-fixed-1" > 4< / td >
< td class = "col-fixed col-fixed-2" > < div class = "phrase-text" > 感谢您的咨询!如有其他健康问题,欢迎随时联系我们。祝您身体健康!< / div > < / td >
< td class = "col-fixed col-fixed-3" > < span class = "tag tag-blue" > 结束语< / span > < / td >
< td > 543< / td >
< td > 2025-07-15< / td >
< td class = "col-fixed col-fixed-end" >
< div style = "display:flex;gap:8px;" >
< span class = "link" onclick = "openDrawer('edit',this)" > 编辑< / span >
< span class = "link-danger" > 删除< / span >
< / div >
< / td >
< / tr >
< tr >
< td class = "col-fixed col-fixed-1" > 5< / td >
< td class = "col-fixed col-fixed-2" > < div class = "phrase-text" > 根据您描述的症状,建议您先做一个血常规和肝功能检查,排除常见病因。< / div > < / td >
< td class = "col-fixed col-fixed-3" > < span class = "tag tag-green" > 引导语< / span > < / td >
< td > 412< / td >
< td > 2025-08-01< / td >
< td class = "col-fixed col-fixed-end" >
< div style = "display:flex;gap:8px;" >
< span class = "link" onclick = "openDrawer('edit',this)" > 编辑< / span >
< span class = "link-danger" > 删除< / span >
< / div >
< / td >
< / tr >
< / tbody >
< / table >
< / div >
< div class = "pagination" >
< span > 共 18 条< / span >
< button class = "page-btn" > ‹ < / button >
< button class = "page-btn active" > 1< / button >
< button class = "page-btn" > 2< / button >
< button class = "page-btn" > › < / button >
< select class = "filter-select" style = "min-width:70px;height:32px;" > < option > 10条< / option > < option > 20条< / option > < / select >
< / div >
< / div >
< / main >
< script >
function openDrawer ( type , triggerEl ) {
var drawer = document . getElementById ( 'drawer' ) ;
var overlay = document . getElementById ( 'drawer-overlay' ) ;
var title = document . getElementById ( 'drawer-title' ) ;
var textarea = drawer . querySelector ( '.form-textarea' ) ;
var catSelect = drawer . querySelector ( '.form-select' ) ;
title . innerText = type === 'add' ? '新增常用语' : '编辑常用语' ;
drawer . classList . add ( 'open' ) ;
overlay . classList . add ( 'open' ) ;
if ( type === 'edit' && triggerEl ) {
var tr = triggerEl . closest ( 'tr' ) ;
var cells = tr . querySelectorAll ( 'td' ) ;
textarea . value = cells [ 1 ] . textContent . trim ( ) ;
var cat = cells [ 2 ] . textContent . trim ( ) ;
for ( var i = 0 ; i < catSelect . options . length ; i ++ ) {
if ( catSelect . options [ i ] . text === cat ) { catSelect . selectedIndex = i ; break ; }
}
} else {
textarea . value = '' ;
catSelect . selectedIndex = 0 ;
}
}
function closeDrawer ( ) {
document . getElementById ( 'drawer' ) . classList . remove ( 'open' ) ;
document . getElementById ( 'drawer-overlay' ) . classList . remove ( 'open' ) ;
}
< / script >
<!-- BODY_CONTINUE -->
< / body >
< / html >