新分支：Vite+React19+TS+Tailwind v4 重新搭建，先跑通四级响应式布局壳
不再沿用旧 im_webapp 的技术栈（webpack + class组件 + 15000行全局CSS + 手搓History路由）， 按业务重新选型：Vite/React Router/Zustand预留/TanStack Query/保留tinode-sdk真实依赖 （协议客户端本身没有重写的业务理由）。新代码放在 web/ 子目录，旧代码原样保留在仓库根目录， 两者共存到重写完成。 这一步先验证布局壳本身：NavRail（消息/通讯录/收藏/文件助手/通话记录/设置）+ 会话列表 + 主区域 + 详情栏，按设计稿的四档断点（<640/640-959/960-1279/≥1280）用真实浏览器宽度逐档验证 过——两列及以下"列表/主区域二选一+返回键"、三列"详情栏抽屉化"、四列"详情栏常驻"均已用 真实点击/返回验证正确，不是只看了截图。会话列表和聊天内容目前是占位数据，业务数据接入和 Tinode连接是下一步。 Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Your Name
co-authored by
Claude Sonnet 5
Claude Sonnet 5
parent
4e8f45d7d8
commit
8bcd9f3a5b
@@ -0,0 +1,118 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
/*
|
||||
* Design tokens ported 1:1 from docs/design_handoff_meetingim_web/README.md's "Design Tokens"
|
||||
* section. Values are exact hex/px from the design handoff, not semantic guesses -- keep them in
|
||||
* sync with that doc, not with whatever the previous im_webapp's css/base.css happened to use.
|
||||
*
|
||||
* Breakpoints are intentionally remapped onto Tailwind's own sm/md/lg so every component can just
|
||||
* use the standard `sm:`/`md:`/`lg:` prefixes (min-width, mobile-first) instead of inventing custom
|
||||
* variants: <640 base styles = single column mobile, sm: (>=640) = two column, md: (>=960) = three
|
||||
* column, lg: (>=1280) = four column docked detail panel.
|
||||
*/
|
||||
@theme {
|
||||
--breakpoint-sm: 640px;
|
||||
--breakpoint-md: 960px;
|
||||
--breakpoint-lg: 1280px;
|
||||
|
||||
--font-sans: Roboto, 'PingFang SC', 'Microsoft YaHei', sans-serif;
|
||||
|
||||
/* Primary / accent */
|
||||
--color-accent: #1677ff;
|
||||
--color-accent-soft-bg: #e3eefe;
|
||||
--color-accent-selected-bg: #e8f1fe;
|
||||
--color-focus-border: #4091ff;
|
||||
|
||||
--color-btn: #368bfa;
|
||||
--color-btn-hover: #1677e8;
|
||||
--color-btn-disabled: #b8d5fa;
|
||||
|
||||
/* Sent bubble */
|
||||
--color-bubble-mine: #b9eb8f;
|
||||
|
||||
/* Surfaces */
|
||||
--color-surface-chat: #eef1f4;
|
||||
--color-surface-content: #f6f7f9;
|
||||
--color-surface-page: #f7f9fc;
|
||||
--color-surface-rail: #f2f4f7;
|
||||
--color-surface-input: #f2f4f7;
|
||||
--color-surface-search: #f1f2f4;
|
||||
|
||||
/* Borders */
|
||||
--color-border-panel: #eceef1;
|
||||
--color-border-row: #f1f2f4;
|
||||
--color-border-list-item: #f4f5f7;
|
||||
|
||||
/* Text */
|
||||
--color-text-title: #14171c;
|
||||
--color-text-heading: #22262d;
|
||||
--color-text-body: #252931;
|
||||
--color-text-secondary: #656b74;
|
||||
--color-text-tertiary-1: #4a4f57;
|
||||
--color-text-tertiary-2: #969ca5;
|
||||
--color-text-tertiary-3: #9ca2aa;
|
||||
--color-text-tertiary-4: #8d949d;
|
||||
--color-text-placeholder-1: #b2b7bf;
|
||||
--color-text-placeholder-2: #a5abb4;
|
||||
|
||||
--color-icon-default: #555c65;
|
||||
--color-icon-arrow: #c2c7ce;
|
||||
|
||||
/* Status */
|
||||
--color-unread: #f34b46;
|
||||
--color-danger-text: #d94b4b;
|
||||
--color-danger-border: #cf3f3f;
|
||||
--color-danger-border-soft: #f3c4c4;
|
||||
--color-online: #1fb36a;
|
||||
--color-offline: #aeb4bd;
|
||||
|
||||
/* Orange (system messages / group owner / warning) */
|
||||
--color-warn: #ff951c;
|
||||
--color-warn-bg: #fff5e5;
|
||||
--color-announce: #f5a623;
|
||||
--color-announce-bg: #fff8e6;
|
||||
--color-announce-text: #6d4c41;
|
||||
|
||||
/* Green (file assistant / success) */
|
||||
--color-success: #16ae54;
|
||||
--color-success-bg: #eefaf3;
|
||||
|
||||
/* Alert strips */
|
||||
--color-error-strip-bg: #ffeef0;
|
||||
--color-error-strip-text: #b51c1c;
|
||||
--color-info-strip-bg: #e8f1fe;
|
||||
--color-info-strip-text: #1a4f9c;
|
||||
|
||||
/* Call surfaces (dark) */
|
||||
--color-call-bg-1: #1b2231;
|
||||
--color-call-bg-2: #1f2a3d;
|
||||
--color-call-bg-3: #3b4a63;
|
||||
|
||||
/* Avatar palette (deterministic per-contact hashing picks from this list) */
|
||||
--color-avatar-1: #3c8df6;
|
||||
--color-avatar-2: #7c5cf6;
|
||||
--color-avatar-3: #2bb673;
|
||||
--color-avatar-4: #f28c3b;
|
||||
--color-avatar-5: #e2537a;
|
||||
--color-avatar-6: #0097a8;
|
||||
--color-avatar-7: #8d6e63;
|
||||
--color-avatar-8: #5c6bc0;
|
||||
--color-avatar-9: #26a69a;
|
||||
--color-avatar-10: #ef6c00;
|
||||
--color-avatar-11: #9ca2aa;
|
||||
|
||||
/* Shadows */
|
||||
--shadow-card: 0 8px 32px rgba(35, 74, 125, 0.10);
|
||||
--shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.18);
|
||||
--shadow-menu: 0 12px 36px rgba(0, 0, 0, 0.16);
|
||||
--shadow-bubble: 0 1px 2px rgba(0, 0, 0, 0.06);
|
||||
--shadow-btn: 0 4px 12px rgba(54, 139, 250, 0.2);
|
||||
--shadow-focus-ring: 0 0 0 3px rgba(22, 119, 255, 0.1);
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
background: var(--color-surface-page);
|
||||
color: var(--color-text-body);
|
||||
font-family: var(--font-sans);
|
||||
}
|
||||
Reference in New Issue
Block a user