@steedos-labs/content-compliance 1.0.4 → 1.0.6

package/public/dynamic.css

@@ -41,7 +41,33 @@ form {
 
 .mt-6.flex.justify-end {
     order: 6;
-    margin-top: 1rem;
+    margin-top: 24px;
+}
+
+/* 输入框组：去掉上下额外留白，使分隔线、输入框、按钮之间统一为 24px */
+form>.rounded-md.shadow-sm{
+    margin-top: 0;
+    margin-bottom: 0;
+    box-shadow: none;
+}
+
+/* 邮箱、密码拆成两个独立的圆角输入框，间距 12px */
+form>.rounded-md.shadow-sm>.-mt-px{
+    margin-top: 12px;
+}
+
+#loginId,
+#password{
+    height: 44px;
+    border-radius: 6px !important;
+}
+
+/* 输入框聚焦：主题色边框 + 浅色光晕 */
+#loginId:focus,
+#password:focus{
+    outline: none;
+    border-color: rgb(2 53 90);
+    box-shadow: 0 0 0 2px rgb(2 53 90 / 15%);
 }
 
 .mt-6.flex.justify-end button{
@@ -49,6 +75,7 @@ form {
     background: none;
     color: rgb(2 53 90 / var(--tw-bg-opacity));
     font-weight: 400;
+    height: 44px;
 }
 
 .flex:last-of-type {
@@ -58,18 +85,40 @@ form {
 .flex:last-of-type>a{
     background-color: rgb(2 53 90 / var(--tw-bg-opacity));
     color: #ffffff !important;
-    height: 60px;
+    height: 44px;
 }
 
 .mt-6.mb-6.relative {
     order: 2;
 }
 
+/* 分隔线文字「外部用户请使用以下登录方式」 */
+form>.mt-6.mb-6.relative span{
+    font-size: 14px;
+    color: #374151;
+}
+
 .h-10{
     margin-bottom: 2rem;
     height: auto !important;
 }
 
+/* 登录框与账号申请弹框统一字体：英文字体在前，中文指定苹方 / 微软雅黑（均为系统字体） */
+.relative.rounded.p-10.sm\:shadow-md.bg-white.w-screen.max-w-md,
+.account-apply-modal{
+    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
+        "PingFang SC", "Microsoft YaHei", "Noto Sans", sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+@media (min-width: 769px) {
+    .relative.rounded.p-10.sm\:shadow-md.bg-white.w-screen.max-w-md{
+        border-radius: 20px;
+        box-shadow: 0 8px 24px rgb(0 0 0 / 12%);
+    }
+}
+
 .relative.rounded.p-10.sm\:shadow-md.bg-white.w-screen.max-w-md>div{
     display: flex;
     justify-content: center;
@@ -84,7 +133,8 @@ form {
 }
 
 form{
-    margin-bottom: 40px;
+    /* 隐私勾选行 bottom: 40px、行高 20px，此处 44px 使其与上方按钮间距为 24px */
+    margin-bottom: 44px;
 }
 
 .agreement-container{
@@ -94,16 +144,62 @@ form{
     /* bottom: -30px; */
     bottom: 40px;
     font-size: 12px;
+    line-height: 20px;
+    color: #1f2937;
+}
+
+.agreement-container label{
+    vertical-align: middle;
+    cursor: pointer;
 }
 
 .agreement-container a{
-    color: rgb(2 53 90 / var(--tw-bg-opacity)) !important;
+    color: rgb(2 53 90) !important;
     background-color: none !important;
+    text-decoration-line: none;
+    margin: 0 2px;
+}
+
+.agreement-container a:hover{
     text-decoration-line: underline;
 }
 
-.agreement-container input{
-    margin-right: 5px;
+/* 复选框：浅灰描边圆角方框，勾选后为主题色 */
+.agreement-container input[type="checkbox"]{
+    -webkit-appearance: none;
+    appearance: none;
+    width: 14px;
+    height: 14px;
+    margin: 0 5px 0 0;
+    vertical-align: middle;
+    border: 1px solid #d1d5db;
+    border-radius: 3px;
+    background: #ffffff;
+    cursor: pointer;
+    position: relative;
+    /* 中文字形偏下，略微下移与文字居中对齐 */
+    top: 3px;
+}
+
+.agreement-container input[type="checkbox"]:hover{
+    border-color: rgb(2 53 90);
+}
+
+.agreement-container input[type="checkbox"]:checked{
+    border-color: rgb(2 53 90);
+    background: rgb(2 53 90);
+}
+
+.agreement-container input[type="checkbox"]:checked::after{
+    content: '';
+    position: absolute;
+    left: 4px;
+    top: 1px;
+    width: 4px;
+    height: 8px;
+    border: solid #ffffff;
+    border-width: 0 2px 2px 0;
+    transform: rotate(45deg);
 }
 
 .privacy-message{
@@ -118,6 +214,95 @@ input{
     font-size: 14px !important;
 }
 
+.account-apply-btn{
+    z-index: 999;
+    position: absolute;
+    /* 减去左右内边距，使文字与输入框右边缘对齐 */
+    right: calc(2.5rem - 8px);
+    /* 与左侧隐私勾选行垂直居中对齐 */
+    bottom: 38px;
+    padding: 2px 8px;
+    font-size: 12px;
+    line-height: 20px;
+    color: #4b5563;
+    background: transparent;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: background-color 0.2s, color 0.2s;
+}
+
+.account-apply-btn:hover{
+    color: rgb(2 53 90);
+    background: #f3f4f6;
+}
+
+.account-apply-modal{
+    display: none;
+    position: fixed;
+    inset: 0;
+    z-index: 10000;
+    align-items: center;
+    justify-content: center;
+    background: rgb(0 0 0 / 45%);
+}
+
+.account-apply-modal.show{
+    display: flex;
+}
+
+.account-apply-dialog{
+    width: 560px;
+    max-width: calc(100vw - 32px);
+    padding: 28px 32px 24px;
+    background: #ffffff;
+    border-radius: 8px;
+    box-shadow: 0 10px 30px rgb(0 0 0 / 20%);
+    color: #1f2937;
+}
+
+.account-apply-title{
+    font-size: 18px;
+    font-weight: bold;
+    margin-bottom: 12px;
+}
+
+.account-apply-content{
+    font-size: 14px;
+    line-height: 24px;
+}
+
+.account-apply-content p{
+    margin: 0 0 8px;
+}
+
+.account-apply-content ul{
+    margin: 0 0 8px;
+    padding-left: 20px;
+    list-style: disc;
+}
+
+.account-apply-content a{
+    color: #2563eb;
+    text-decoration-line: underline;
+}
+
+.account-apply-footer{
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 20px;
+}
+
+.account-apply-footer button{
+    padding: 6px 20px;
+    font-size: 14px;
+    color: #ffffff;
+    background: rgb(2 53 90);
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+}
+
 @keyframes shake {
     0%, 100% { transform: translateX(0); }
     25% { transform: translateX(-5px); }
@@ -187,5 +372,5 @@ input{
     display: none !important;
 }
 .w-full.border.border-gray-300.justify-center.hover\:bg-gray-50.text-gray-800.py-2.px-4.rounded.inline-flex.items-center span{
-    font-weight: bold;
+    font-weight: 600;
 }

package/public/dynamic.js

@@ -12,6 +12,99 @@ document.title = "内容审核";
 
 // document.head.appendChild(link);
 
+// 账号申请：申请表放在 public/account-apply/ 下，文件名固定，扩展名兼容 .docx / .xlsx（优先 .docx）
+const ACCOUNT_APPLY_CONTACT = 'sweet.tian@pepsico.com';
+const ACCOUNT_APPLY_FORMS = {
+    employee: { name: '百事食品审核系统内部员工申请表', path: '/account-apply/ccs-employee-application' },
+    agency: { name: '百事食品审核系统Agency申请表', path: '/account-apply/ccs-agency-application' }
+};
+const ACCOUNT_APPLY_EXTENSIONS = ['.docx', '.xlsx'];
+
+// 依次探测各扩展名的文件是否存在，返回第一个存在的地址
+async function resolveAccountApplyFormUrl(form) {
+    for (const ext of ACCOUNT_APPLY_EXTENSIONS) {
+        const url = form.path + ext;
+        try {
+            const res = await fetch(url, { method: 'HEAD', cache: 'no-store' });
+            const contentType = res.headers.get('content-type') || '';
+            // 排除不存在的路径被回退成 html 页面的情况
+            if (res.ok && contentType.indexOf('text/html') === -1) {
+                return { url: url, ext: ext };
+            }
+        } catch (e) {
+            // 忽略，继续探测下一个扩展名
+        }
+    }
+    return null;
+}
+
+async function downloadAccountApplyForm(key) {
+    const form = ACCOUNT_APPLY_FORMS[key];
+    const file = await resolveAccountApplyFormUrl(form);
+    if (!file) {
+        alert('申请表暂未提供，请联系 ' + ACCOUNT_APPLY_CONTACT);
+        return;
+    }
+    const a = document.createElement('a');
+    a.href = file.url;
+    a.download = form.name + file.ext;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+}
+
+function createAccountApplyModal() {
+    if (document.getElementById('accountApplyModal')) {
+        return;
+    }
+    const modal = document.createElement('div');
+    modal.id = 'accountApplyModal';
+    modal.classList.add('account-apply-modal');
+    modal.innerHTML =
+        '<div class="account-apply-dialog" role="dialog" aria-modal="true">' +
+            '<div class="account-apply-title">账号申请</div>' +
+            '<div class="account-apply-content">' +
+                '<p>如需开通百事食品审核系统账号，请下载对应的申请表，审核通过后开通：</p>' +
+                '<ul>' +
+                    '<li>百事食品内部员工：<a href="#" data-form="employee">【百事食品审核系统内部员工申请表】</a></li>' +
+                    '<li>百事食品 Agency 成员：<a href="#" data-form="agency">【百事食品审核系统 Agency 申请表】</a></li>' +
+                '</ul>' +
+                '<p>申请表填写完成后，内部员工请线下获取 Line manager 的邮件审批，Agency 成员请线下获取百事内部对接人的邮件审批；' +
+                '审批通过后，请附上审批邮件联系 Sweet Tian（<a href="mailto:' + ACCOUNT_APPLY_CONTACT + '">' + ACCOUNT_APPLY_CONTACT + '</a>）开通账号。</p>' +
+            '</div>' +
+            '<div class="account-apply-footer"><button type="button" class="account-apply-ok">知道了</button></div>' +
+        '</div>';
+
+    modal.addEventListener('click', function (event) {
+        const formLink = event.target.closest('a[data-form]');
+        if (formLink) {
+            event.preventDefault();
+            downloadAccountApplyForm(formLink.getAttribute('data-form'));
+            return;
+        }
+        if (event.target === modal || event.target.classList.contains('account-apply-ok')) {
+            modal.classList.remove('show');
+        }
+    });
+    document.body.appendChild(modal);
+}
+
+function appendAccountApplyButton(element) {
+    if (element.querySelector('.account-apply-btn')) {
+        return;
+    }
+    const button = document.createElement('button');
+    button.type = 'button';
+    button.classList.add('account-apply-btn');
+    button.textContent = '账号申请';
+    button.addEventListener('click', function (event) {
+        event.preventDefault();
+        createAccountApplyModal();
+        document.getElementById('accountApplyModal').classList.add('show');
+    });
+    element.appendChild(button);
+}
+
 
 function appendAgreement() {
     const element = document.querySelector('.relative.rounded.p-10.sm\\:shadow-md.bg-white.w-screen.max-w-md');
@@ -73,6 +166,9 @@ function appendAgreement() {
         // 在提交按钮前插入容器
         element.appendChild(container);
 
+        // 登录框右下角：账号申请按钮
+        appendAccountApplyButton(element);
+
         const ssoBtn = document.querySelector('.w-full.border.border-gray-300.justify-center.hover\\:bg-gray-50.text-gray-800.py-2.px-4.rounded.inline-flex.items-center')
 
         if(ssoBtn){