xiong
30fd159041
- Introduced Vite configuration files (vite.config.js, vite.config.ts, vite.config.d.ts) for the React frontend. - Configured server proxy settings for API endpoints. - Added Vitest configuration files (vitest.config.js, vitest.config.ts, vitest.config.d.ts) for testing. - Updated architecture overview to reflect the separation of the platform admin frontend into its own React project. - Modified quickstart documentation to guide users on starting the platform admin frontend.
79 lines
6.8 KiB
CSS
79 lines
6.8 KiB
CSS
* { box-sizing: border-box; }
|
|
html, body, #root { min-width: 320px; min-height: 100%; margin: 0; }
|
|
body { background: #f3f6fa; }
|
|
.full-screen-loading { min-height: 100vh; display: grid; place-items: center; }
|
|
.app-shell { min-height: 100vh; }
|
|
.app-sider { position: sticky !important; top: 0; height: 100vh; overflow: hidden; border-right: 1px solid #e8edf3; box-shadow: 8px 0 28px rgba(24, 55, 88, .035); display: flex; flex-direction: column; }
|
|
.app-sider .ant-layout-sider-children { display: flex; flex-direction: column; height: 100%; }
|
|
.sider-brand { height: 76px; display: flex; align-items: center; gap: 12px; padding: 14px 17px; white-space: nowrap; overflow: hidden; border-bottom: 1px solid #eef2f6; }
|
|
.brand-mark { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 13px; overflow: hidden; box-shadow: 0 6px 16px rgba(28, 91, 175, .22); }
|
|
.brand-mark img { width: 100%; height: 100%; display: block; object-fit: cover; }
|
|
.brand-copy { min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
|
|
.brand-copy strong { color: #172b4d; font-size: 16px; letter-spacing: .02em; }
|
|
.brand-copy span { color: #8b98a8; font-size: 11px; margin-top: 5px; font-weight: 500; letter-spacing: .08em; }
|
|
.sider-navigation { flex: 1; min-height: 0; overflow: auto; padding: 12px 10px; }
|
|
.sider-navigation .ant-menu { border-inline-end: 0 !important; background: transparent; }
|
|
.sider-navigation .ant-menu-item-group-title { padding: 15px 12px 7px !important; color: #9aa6b5 !important; font-size: 11px !important; font-weight: 600; letter-spacing: .09em; }
|
|
.sider-navigation .ant-menu-item { height: 42px; line-height: 42px; margin: 3px 0; border-radius: 9px; color: #526173; font-weight: 500; }
|
|
.sider-navigation .ant-menu-item .anticon { color: #7c8998; font-size: 17px; }
|
|
.sider-navigation .ant-menu-item:hover { color: #1f66c2 !important; background: #f3f7fc !important; }
|
|
.sider-navigation .ant-menu-item-selected { color: #165eb8 !important; background: #eaf3ff !important; font-weight: 600; }
|
|
.sider-navigation .ant-menu-item-selected::after { display: none; }
|
|
.sider-navigation .ant-menu-item-selected .anticon { color: #1d6fd1; }
|
|
.ant-layout-sider-collapsed .sider-brand { padding-inline: 17px; }
|
|
.ant-layout-sider-collapsed .sider-navigation { padding-inline: 10px; }
|
|
.ant-layout-sider-collapsed .ant-menu-item-group-title { height: 12px; padding: 6px 0 !important; font-size: 0 !important; }
|
|
.sider-footer { padding: 10px 12px 14px; border-top: 1px solid #eef2f6; }
|
|
.sider-footer .ant-btn { height: 40px; color: #748294; text-align: left; border-radius: 9px; }
|
|
.sider-footer .ant-btn:hover { color: #1f66c2 !important; background: #f3f7fc !important; }
|
|
.ant-layout-sider-collapsed .sider-footer .ant-btn { text-align: center; }
|
|
.app-header { height: 72px; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #e7ecf2; position: sticky; top: 0; z-index: 10; background: rgba(255,255,255,.92); backdrop-filter: blur(12px); }
|
|
.header-page-title { color: #26374a; font-size: 16px; font-weight: 600; }
|
|
.user-menu { cursor: pointer; padding: 8px; border-radius: 10px; }
|
|
.user-menu:hover { background: #f5f7fa; }
|
|
.user-role { font-size: 12px; }
|
|
.app-content { padding: 28px; min-width: 0; }
|
|
.business-page, .question-bank-page { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
|
|
.business-page h2, .question-bank-page h2 { margin: 0 !important; }
|
|
.business-card { min-height: 520px; }
|
|
.business-filter { margin-bottom: 18px; gap: 8px; }
|
|
.question-workspace { height: calc(100vh - 190px); min-height: 640px; background: white; border: 1px solid #e6ebf0; border-radius: 12px; overflow: hidden; }
|
|
.workspace-panel { height: 100%; padding: 16px; overflow: auto; }
|
|
.workspace-panel + .workspace-panel { border-left: 1px solid #eef1f4; }
|
|
.bank-panel { display: flex; flex-direction: column; gap: 12px; }
|
|
.bank-panel .ant-list { flex: 1; overflow: auto; }
|
|
.bank-panel .ant-list-item { padding: 12px; border-radius: 8px; cursor: pointer; }
|
|
.bank-panel .ant-list-item:hover, .bank-panel .selected-business-item { background: #edf5fc; }
|
|
.bank-panel .ant-list-item-action { margin-inline-start: 4px; }
|
|
.node-panel { display: flex; flex-direction: column; gap: 10px; }
|
|
.node-panel h5 { margin: 0 !important; }
|
|
.node-panel .ant-tree { flex: 1; overflow: auto; }
|
|
.node-panel .ant-tree-node-content-wrapper { min-width: 0; }
|
|
.node-panel .ant-tree-title { display: block; min-width: 150px; }
|
|
.node-detail { margin-top: auto; background: #f8fafc; }
|
|
.question-panel { display: flex; flex-direction: column; gap: 16px; }
|
|
.question-panel > .ant-table-wrapper { min-height: 0; }
|
|
.flex-field { flex: 1; min-width: 0; }
|
|
.flex-field .ant-input-number { width: 100%; }
|
|
.code-editor textarea, textarea.code-editor { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
|
|
.workspace-page, .dashboard-page { display: flex; flex-direction: column; gap: 22px; }
|
|
.workspace-page h2, .dashboard-page h2 { margin: 0 !important; }
|
|
.workspace-grid { display: grid; grid-template-columns: minmax(340px, 0.8fr) minmax(520px, 1.6fr); gap: 18px; align-items: start; }
|
|
.operation-list-card .ant-card-body { padding: 0; max-height: calc(100vh - 245px); overflow: auto; }
|
|
.operation-list-card .ant-list-item { padding: 14px 18px; cursor: pointer; transition: background .2s; }
|
|
.operation-list-card .ant-list-item:hover, .operation-list-card .operation-active { background: #eef5fc; }
|
|
.operation-list-card .ant-list-item-meta-title { margin-bottom: 6px !important; }
|
|
.response-card { min-height: 460px; }
|
|
.metric-card { border: 0; box-shadow: 0 6px 24px rgba(31, 62, 92, .06); }
|
|
.dashboard-section-title { margin: 8px 0 -4px !important; }
|
|
.portal-card { height: 100%; }
|
|
.portal-card .ant-btn { padding: 0; }
|
|
.login-page { min-height: 100vh; display: grid; grid-template-columns: minmax(420px, 1.2fr) minmax(420px, .8fr); background: linear-gradient(135deg, #0c3158 0%, #1f659f 55%, #eaf2f8 55%); }
|
|
.login-brand { color: white; display: flex; flex-direction: column; justify-content: center; padding: 10vw; }
|
|
.login-brand img { width: 88px; height: 88px; object-fit: contain; border-radius: 22px; background: white; padding: 6px; box-shadow: 0 18px 50px rgba(0,0,0,.2); }
|
|
.login-brand h1, .login-brand .ant-typography { color: white; }
|
|
.login-card { width: min(430px, calc(100vw - 40px)); margin: auto; box-shadow: 0 24px 70px rgba(19, 43, 69, .18); }
|
|
.login-alert { margin-bottom: 18px; }
|
|
@media (max-width: 1100px) { .workspace-grid { grid-template-columns: 1fr; } .operation-list-card .ant-card-body { max-height: 420px; } .question-workspace { overflow-x: auto; } }
|
|
@media (max-width: 800px) { .login-page { grid-template-columns: 1fr; background: linear-gradient(160deg, #0c3158 0%, #1f659f 45%, #eef4f8 45%); } .login-brand { padding: 42px 28px 18px; } .login-brand img { width: 60px; height: 60px; } .login-brand h1 { font-size: 28px; margin: 12px 0 0; } .login-card { margin: 20px auto 48px; } .app-content { padding: 18px; } }
|