李鹏宇
73d764938d
前端： - world.html 游戏内聊天组件重构：表情选择器改固定方格+自适应列+去滚动条； 输入框清空占位文字+隐藏滚动条；聊天面板整体高度缩短约 1/3； 顶部用户区改为纯文字并点开个人信息弹窗（头像/头像框/性别/说明/称号/注册） - chat.html 聊天输入框压扁（46→34px） - codex.html 新增神话品质、天赋/技能书/书籍分类与预置数据 - rules.html 规则文档更新 后端（Odoo）： - game_base 附件改为看板视图（图片/名称/备注/大小） - yt_world 玩家菜单直接指向 hr.employee - game_base 员工表单隐藏原生联系人/组织架构页签 - chat 模型/接口/视图与规则数据扩充 资源：生成 4x4 资源精灵表（树木/石材/芦苇/宝箱）
177 lines
6.9 KiB
HTML
177 lines
6.9 KiB
HTML
<!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>
|
|
:root {
|
|
--bg: #0e1116;
|
|
--bg-soft: #161b22;
|
|
--bg-card: #1c2230;
|
|
--line: #2a3140;
|
|
--txt: #e6edf3;
|
|
--txt-dim: #8b97a7;
|
|
--accent: #2dd4a7; /* 青绿，主题色 */
|
|
--accent-deep: #14b88a;
|
|
--bubble-self: linear-gradient(135deg, #2dd4a7, #14b88a);
|
|
--bubble-other: #232b39;
|
|
--danger: #f87171;
|
|
}
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
html, body { height: 100%; }
|
|
body {
|
|
font-family: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", system-ui, sans-serif;
|
|
background: radial-gradient(1200px 600px at 20% -10%, #1a2233 0%, var(--bg) 60%);
|
|
color: var(--txt);
|
|
display: flex;
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* 左侧频道栏 */
|
|
.sidebar {
|
|
width: 240px;
|
|
flex-shrink: 0;
|
|
background: var(--bg-soft);
|
|
border-right: 1px solid var(--line);
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.sidebar h1 {
|
|
font-size: 17px;
|
|
padding: 18px 18px 14px;
|
|
letter-spacing: 1px;
|
|
border-bottom: 1px solid var(--line);
|
|
display: flex; align-items: center; gap: 8px;
|
|
}
|
|
.sidebar h1 .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
|
|
.channel-list { padding: 10px; overflow-y: auto; flex: 1; }
|
|
.channel {
|
|
display: flex; align-items: center; gap: 10px;
|
|
padding: 11px 12px; border-radius: 12px; cursor: pointer;
|
|
color: var(--txt-dim); transition: all .18s ease; margin-bottom: 4px;
|
|
}
|
|
.channel:hover { background: var(--bg-card); color: var(--txt); }
|
|
.channel.active { background: var(--bg-card); color: var(--txt); box-shadow: inset 3px 0 0 var(--accent); }
|
|
.channel .ico { font-size: 16px; }
|
|
.channel .name { font-size: 14px; font-weight: 500; }
|
|
.channel .tag { margin-left: auto; font-size: 11px; color: var(--txt-dim); }
|
|
|
|
.me-bar {
|
|
border-top: 1px solid var(--line);
|
|
padding: 12px 14px; display: flex; align-items: center; gap: 10px;
|
|
font-size: 13px; color: var(--txt-dim);
|
|
}
|
|
.me-bar .avatar {
|
|
width: 32px; height: 32px; border-radius: 50%;
|
|
background: linear-gradient(135deg, var(--accent), #3b82f6);
|
|
display: flex; align-items: center; justify-content: center;
|
|
color: #06121a; font-weight: 700; font-size: 13px;
|
|
}
|
|
.me-bar .login-link { color: var(--accent); cursor: pointer; text-decoration: underline; }
|
|
|
|
/* 右侧聊天区 */
|
|
.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
|
|
.chat-head {
|
|
padding: 16px 22px; border-bottom: 1px solid var(--line);
|
|
display: flex; align-items: baseline; gap: 10px;
|
|
}
|
|
.chat-head .title { font-size: 16px; font-weight: 600; }
|
|
.chat-head .sub { font-size: 12px; color: var(--txt-dim); }
|
|
|
|
.messages {
|
|
flex: 1 1 auto; max-height: 290px; overflow-y: auto; padding: 16px 22px 6px;
|
|
display: flex; flex-direction: column; gap: 10px;
|
|
scroll-behavior: smooth;
|
|
}
|
|
.row { display: flex; gap: 8px; max-width: 76%; }
|
|
.row.self { align-self: flex-end; flex-direction: row-reverse; }
|
|
.row .ava {
|
|
width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
|
|
background: var(--bg-card); display: flex; align-items: center; justify-content: center;
|
|
font-size: 13px; color: var(--txt-dim); border: 1px solid var(--line);
|
|
}
|
|
.row.self .ava { background: linear-gradient(135deg, var(--accent), #3b82f6); color: #06121a; border: none; }
|
|
.bubble-wrap { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
|
|
.row.self .bubble-wrap { align-items: flex-end; }
|
|
.meta { font-size: 11px; color: var(--txt-dim); display: flex; gap: 8px; }
|
|
.bubble {
|
|
padding: 8px 12px; border-radius: 13px; line-height: 1.5;
|
|
background: var(--bubble-other); color: var(--txt); font-size: 14px;
|
|
word-break: break-word; white-space: pre-wrap;
|
|
}
|
|
.row.self .bubble { background: var(--bubble-self); color: #06121a; font-weight: 500; }
|
|
|
|
/* AI 向导消息：紫色区分，与世界频道玩家消息隔离 */
|
|
.row.guide .ava { background: linear-gradient(135deg, #a78bfa, #7c3aed); color: #fff; border: none; }
|
|
.row.guide .bubble { background: linear-gradient(135deg, #2a2150, #3b2f63); color: #ede9fe; border: 1px solid #4c3a82; }
|
|
.row.guide .meta span:first-child { color: #c4b5fd; }
|
|
|
|
/* 输入区 */
|
|
.composer {
|
|
border-top: 1px solid var(--line); padding: 8px 14px;
|
|
display: flex; gap: 8px; align-items: flex-end; background: var(--bg-soft);
|
|
}
|
|
.composer textarea {
|
|
flex: 1; resize: none; height: 34px; max-height: 120px;
|
|
background: var(--bg-card); border: 1px solid var(--line); border-radius: 10px;
|
|
color: var(--txt); padding: 7px 11px; font-size: 13.5px; font-family: inherit;
|
|
outline: none; transition: border-color .18s;
|
|
}
|
|
.composer textarea:focus { border-color: var(--accent); }
|
|
.composer button {
|
|
height: 34px; padding: 0 16px; border: none; border-radius: 10px;
|
|
background: var(--bubble-self); color: #06121a; font-weight: 600; font-size: 13px;
|
|
cursor: pointer; transition: transform .12s, filter .12s;
|
|
}
|
|
.composer button:hover { filter: brightness(1.06); }
|
|
.composer button:active { transform: scale(.96); }
|
|
.composer button:disabled { opacity: .5; cursor: not-allowed; }
|
|
|
|
.status-line { font-size: 12px; color: var(--txt-dim); padding: 0 4px 6px; }
|
|
|
|
/* 登录遮罩 */
|
|
.mask {
|
|
position: absolute; inset: 0; background: rgba(8,11,16,.92);
|
|
display: flex; flex-direction: column; align-items: center; justify-content: center;
|
|
gap: 14px; z-index: 10; text-align: center; padding: 20px;
|
|
}
|
|
.mask h2 { font-size: 20px; font-weight: 600; }
|
|
.mask p { color: var(--txt-dim); font-size: 14px; max-width: 320px; line-height: 1.7; }
|
|
.mask a { color: var(--accent); }
|
|
.hidden { display: none !important; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="sidebar">
|
|
<h1><span class="dot"></span>世界聊天</h1>
|
|
<div class="channel-list" id="channels"></div>
|
|
<div class="me-bar" id="meBar">
|
|
<div class="avatar" id="meAvatar">?</div>
|
|
<span id="meText">未登录</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="main">
|
|
<div class="chat-head">
|
|
<span class="title" id="chTitle">世界频道</span>
|
|
<span class="sub" id="chSub">和大家聊聊宇森世界吧</span>
|
|
</div>
|
|
<div class="messages" id="messages"></div>
|
|
<div class="status-line" id="status"></div>
|
|
<div class="composer">
|
|
<textarea id="input" placeholder="说点什么…（Enter 发送，Shift+Enter 换行）" disabled></textarea>
|
|
<button id="sendBtn" disabled>发送</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mask" id="mask">
|
|
<h2>欢迎来到世界聊天</h2>
|
|
<p>需要先登录才能发言。请在游戏或官网登录后，刷新本页即可进入聊天。<br/>（当前未检测到登录状态）</p>
|
|
</div>
|
|
|
|
<script src="/assets/chat.js"></script>
|
|
</body>
|
|
</html>
|