diff --git a/.claude/settings.local.json b/.claude/settings.local.json new file mode 100644 index 0000000..bce454a --- /dev/null +++ b/.claude/settings.local.json @@ -0,0 +1,11 @@ +{ + "permissions": { + "allow": [ + "WebFetch(domain:stitch.withgoogle.com)", + "mcp__plugin_playwright_playwright__browser_navigate", + "mcp__plugin_playwright_playwright__browser_take_screenshot", + "mcp__plugin_playwright_playwright__browser_snapshot", + "Bash(sed:*)" + ] + } +} diff --git a/.playwright-mcp/DESIGN.md b/.playwright-mcp/DESIGN.md new file mode 100644 index 0000000..a03df08 --- /dev/null +++ b/.playwright-mcp/DESIGN.md @@ -0,0 +1,93 @@ +# Design System Specification: The Architectural Approval Engine + +## 1. Overview & Creative North Star: "Precision Ethereal" +The "Precision Ethereal" North Star moves beyond the standard "boxes-on-grey" look of enterprise software. For this OA approval system, we reject the industrial coldness of traditional automation in favor of an interface that feels like high-end architectural drafting: precise, layered, and deceptively simple. + +We break the "template" look by utilizing **intentional asymmetry**—where navigation and content areas don't always align to a rigid center, creating a sense of forward momentum. By combining the authoritative weight of `manrope` typography with a "No-Line" spatial philosophy, we create a signature identity that feels like a premium digital concierge rather than a bureaucratic tool. + +--- + +## 2. Colors & Surface Philosophy +Our color strategy is rooted in **Tonal Depth**. Instead of using lines to separate ideas, we use light. + +### The Palette +- **Primary (The Executive Core):** `primary` (#003da6) and `primary_container` (#0052d9). Use these for high-intent actions. +- **Semantic Accents:** + - `secondary` (#006c46) for Approvals. + - `tertiary` (#733500) for Pending/Warning states. + - `error` (#ba1a1a) for Rejections. +- **Neutrals:** A sophisticated range from `surface` (#faf8ff) to `surface_container_highest` (#e1e2ed). + +### The "No-Line" Rule +**Explicit Instruction:** Do not use 1px solid borders for sectioning or grouping. +Boundaries must be defined through background color shifts. A `surface_container_low` card sitting on a `surface` background provides enough contrast for the human eye to perceive a boundary without adding visual noise. + +### The "Glass & Gradient" Rule +To elevate CTAs and Hero sections, use subtle **Linear Gradients** (e.g., `primary` to `primary_container` at 135 degrees). For floating elements like header bars or mobile navigation, apply **Glassmorphism**: +- **Background:** `surface` at 70% opacity. +- **Effect:** `backdrop-blur: 20px`. +- This ensures the UI feels like it’s floating in a cohesive 3D space rather than being "pasted" on. + +--- + +## 3. Typography: The Editorial Hierarchy +We utilize a dual-font strategy to balance character with utility. + +| Level | Token | Font | Size | Intent | +| :--- | :--- | :--- | :--- | :--- | +| **Display** | `display-lg` | Manrope | 3.5rem | High-impact dashboard stats. | +| **Headline**| `headline-md` | Manrope | 1.75rem | Approval titles and section headers. | +| **Title** | `title-md` | Inter | 1.125rem | Card titles and form groupings. | +| **Body** | `body-md` | Inter | 0.875rem | Standard data and descriptions. | +| **Label** | `label-sm` | Inter | 0.6875rem | Micro-copy and status indicators. | + +**Style Note:** Headlines in Manrope provide an "Editorial" feel, conveying authority. Body text in Inter ensures maximum legibility in dense approval forms. + +--- + +## 4. Elevation & Depth: Tonal Layering +Traditional drop shadows are forbidden unless an object is physically "active" or "hovered." + +* **The Layering Principle:** Stack `surface-container` tiers to create depth. + * *Base:* `surface` + * *Section:* `surface_container_low` + * *Individual Card:* `surface_container_lowest` (Pure white #ffffff) +* **Ambient Shadows:** For floating modals or dropdowns, use a "Tinted Ambient Shadow": + * `box-shadow: 0 12px 40px rgba(25, 27, 35, 0.06);` (Using the `on_surface` color as the shadow base). +* **The Ghost Border:** If high-contrast accessibility is required, use a "Ghost Border": `outline_variant` at 15% opacity. Never use 100% opaque borders. + +--- + +## 5. Components & Interface Objects + +### Buttons (The Action Set) +- **Primary:** Gradient fill (`primary` to `primary_container`), `DEFAULT` (8px) rounding, no border. +- **Secondary:** `surface_container_high` background with `on_surface` text. +- **States:** On hover, increase the elevation through a subtle 4% opacity white overlay rather than changing the base hex code. + +### The "Paper-Stack" Approval Cards +- **Rule:** Forbid divider lines within cards. +- **Structure:** Use `body-lg` for the requestor's name and `label-md` for the timestamp. Separate the "Approve/Reject" actions using a 24px vertical gutter (from the Spacing Scale) rather than a horizontal line. +- **Status Chips:** Use `secondary_container` for "Approved" and `error_container` for "Rejected." The text should always be the corresponding `on_` token for contrast compliance. + +### Form Inputs +- **Style:** Use "Soft Fields." Background is `surface_container_highest` with a `none` border. +- **Focus State:** Transition the background to `surface_container_lowest` and apply a 1px "Ghost Border" using `primary`. + +### Navigation Rails +Instead of a standard sidebar, use a "Floating Rail" with Glassmorphism. The background of the rail should be `surface` at 80% opacity with a heavy backdrop blur, creating a sense of transparency and lightness. + +--- + +## 6. Do’s and Don'ts + +### Do: +- **Embrace Whitespace:** Use the spacing scale to create "breathing room" around complex approval workflows. +- **Use Nested Surfaces:** Put high-priority data on a `surface_container_lowest` card to make it "pop" naturally. +- **Editorial Alignment:** Align large headlines to the left, but allow supporting stats to sit asymmetrically to create visual interest. + +### Don’t: +- **Don’t use 1px Dividers:** They clutter the UI. Use a 16px or 24px gap instead. +- **Don’t use Pure Black Shadows:** Always tint your shadows with the `on_surface` blue-grey hue to maintain a "high-end" look. +- **Don’t use standard System Fonts:** Stick strictly to the Manrope/Inter pairing to protect the brand persona. +- **Don't crowd the margins:** Professionalism is defined by the space you *don't* fill. \ No newline at end of file diff --git a/.playwright-mcp/console-2026-04-17T07-02-07-981Z.log b/.playwright-mcp/console-2026-04-17T07-02-07-981Z.log new file mode 100644 index 0000000..5de1611 --- /dev/null +++ b/.playwright-mcp/console-2026-04-17T07-02-07-981Z.log @@ -0,0 +1,50 @@ +[ 3450ms] [WARNING] No `HydrateFallback` element provided to render during initial hydration @ https://app-companion-430619.appspot.com/assets/chunk-UIGDSWPH-DWpPGu-C.js:0 +[ 87715ms] [VERBOSE] [DOM] Password field is not contained in a form: (More info: https://goo.gl/9p2vKq) %o @ https://accounts.google.com/v3/signin/identifier?continue=https%3A%2F%2Fstitch.withgoogle.com%2Fprojects%2F15895967252002871735&dsh=S-954450068%3A1776409360227944&hl=zh-CN&osid=1&flowName=GlifWebSignIn&flowEntry=ServiceLogin&ifkv=AT1y2_Vf4pNs9FiQxjHRrj_B6zH2uEWYaLMBY_-ZoTO9oA46eQJ0yjJJMXVHYbyS2r2YfWywyAvC0Q:0 +[ 87720ms] [LOG] %c%s color: red; background: yellow; font-size: 24px; 警告！ @ https://www.gstatic.com/_/mss/boq-identity/_/js/k=boq-identity.AccountsSignInUi.zh_CN.ypd2mcoqBSU.es5.O/am=Kf8GAABCEUgGwP___z8AIACCaOB6FoAmEBkAAAAAAAAAALBAAAAaAQ/d=1/excm=_b,_tp,identifierview/ed=1/dg=0/wt=2/ujg=1/rs=AOaEmlGTV8xvDOa5XicjwSaIHye57YLwEw/dti=1/m=_b,_tp:468 +[ 87720ms] [LOG] %c%s font-size: 18px; 使用此控制台可能会导致攻击程序利用 Self-XSS 攻击冒充您并窃取您的信息。 +请勿输入或粘贴您不明白的代码。 @ https://www.gstatic.com/_/mss/boq-identity/_/js/k=boq-identity.AccountsSignInUi.zh_CN.ypd2mcoqBSU.es5.O/am=Kf8GAABCEUgGwP___z8AIACCaOB6FoAmEBkAAAAAAAAAALBAAAAaAQ/d=1/excm=_b,_tp,identifierview/ed=1/dg=0/wt=2/ujg=1/rs=AOaEmlGTV8xvDOa5XicjwSaIHye57YLwEw/dti=1/m=_b,_tp:468 +[ 114287ms] [WARNING] Blocked aria-hidden on an element because its descendant retained focus. The focus must not be hidden from assistive technology users. Avoid using aria-hidden on a focused element or its ancestor. Consider using the inert attribute instead, which will also prevent focus. For more details, see the aria-hidden section of the WAI-ARIA specification at https://w3c.github.io/aria/#aria-hidden. +Element with focus: +Ancestor with aria-hidden: @ https://accounts.google.com/v3/signin/identifier?continue=https%3A%2F%2Fstitch.withgoogle.com%2Fprojects%2F15895967252002871735&dsh=S-954450068%3A1776409360227944&hl=zh-CN&osid=1&flowName=GlifWebSignIn&flowEntry=ServiceLogin&ifkv=AT1y2_Vf4pNs9FiQxjHRrj_B6zH2uEWYaLMBY_-ZoTO9oA46eQJ0yjJJMXVHYbyS2r2YfWywyAvC0Q:0 +[ 128971ms] [VERBOSE] [DOM] Password field is not contained in a form: (More info: https://goo.gl/9p2vKq) %o @ https://accounts.google.com/v3/signin/challenge/pwd?TL=AIgtPP0bxw_hS_9GnS5r08MYmoiskgbQ5-tiFO3yyMg4_m6DniyQG1_r1fju0Mxj&checkConnection=youtube%3A228&checkedDomains=youtube&cid=2&continue=https%3A%2F%2Fstitch.withgoogle.com%2Fprojects%2F15895967252002871735&dsh=S-954450068%3A1776409360227944&flowEntry=ServiceLogin&flowName=GlifWebSignIn&hl=zh-CN&ifkv=AT1y2_Vf4pNs9FiQxjHRrj_B6zH2uEWYaLMBY_-ZoTO9oA46eQJ0yjJJMXVHYbyS2r2YfWywyAvC0Q&osid=1&pstMsg=1:0 +[ 140910ms] [LOG] %c%s color: red; background: yellow; font-size: 24px; 警告！ @ https://www.gstatic.com/_/mss/boq-identity/_/js/k=boq-identity.SpeedBumpPasskeyEnrollmentUi.zh_CN.G5kCirwOGhE.es5.O/am=5z8AAEAADID__z8QhIHOAIABAAAAAAAAAGAIACAQ/d=1/excm=_b,_tp,passkeyenrollmentview/ed=1/dg=0/wt=2/ujg=1/rs=AOaEmlF_mfUCEUTyjIlaZlh9FMlmIyv9RA/dti=1/m=_b,_tp:421 +[ 140910ms] [LOG] %c%s font-size: 18px; 使用此控制台可能会导致攻击程序利用 Self-XSS 攻击冒充您并窃取您的信息。 +请勿输入或粘贴您不明白的代码。 @ https://www.gstatic.com/_/mss/boq-identity/_/js/k=boq-identity.SpeedBumpPasskeyEnrollmentUi.zh_CN.G5kCirwOGhE.es5.O/am=5z8AAEAADID__z8QhIHOAIABAAAAAAAAAGAIACAQ/d=1/excm=_b,_tp,passkeyenrollmentview/ed=1/dg=0/wt=2/ujg=1/rs=AOaEmlF_mfUCEUTyjIlaZlh9FMlmIyv9RA/dti=1/m=_b,_tp:421 +[ 142706ms] [WARNING] Blocked aria-hidden on an element because its descendant retained focus. The focus must not be hidden from assistive technology users. Avoid using aria-hidden on a focused element or its ancestor. Consider using the inert attribute instead, which will also prevent focus. For more details, see the aria-hidden section of the WAI-ARIA specification at https://w3c.github.io/aria/#aria-hidden. +Element with focus: +Ancestor with aria-hidden: @ https://accounts.google.com/v3/signin/speedbump/passkeyenrollment?TL=AIgtPP0bxw_hS_9GnS5r08MYmoiskgbQ5-tiFO3yyMg4_m6DniyQG1_r1fju0Mxj&checkConnection=youtube%3A228&checkedDomains=youtube&continue=https%3A%2F%2Fstitch.withgoogle.com%2Fprojects%2F15895967252002871735&dsh=S-954450068%3A1776409360227944&flowEntry=ServiceLogin&flowName=GlifWebSignIn&hl=zh-CN&ifkv=AT1y2_Vf4pNs9FiQxjHRrj_B6zH2uEWYaLMBY_-ZoTO9oA46eQJ0yjJJMXVHYbyS2r2YfWywyAvC0Q&osid=1&pstMsg=1:0 +[ 154604ms] [INFO] Slow network is detected. See https://www.chromestatus.com/feature/5636954674692096 for more details. Fallback font will be used while loading: https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu4mxK.woff2 @ https://gds.google.com/web/landing?ep=p&gdsid=-1480908174&tda=CAA&gm3e=false&authuser=0&hl=zh-CN&continue=https://accounts.google.com/ServiceLogin?continue%3Dhttps://stitch.withgoogle.com/projects/15895967252002871735%26hl%3Dzh-CN%26authuser%3D0%26passive%3Dtrue%26sarp%3D1%26aodrpl%3D1%26checkedDomains%3Dyoutube%26checkConnection%3Dyoutube:228%26pstMsg%3D1%26osid%3D1&rapt=AEjHL4OGh1_Ie6ktrf5L9ZlPAguwlDK1e3LOMxiyn8-zq7daWqvQl0lfUCYn62hwXaTIFwNWhOrh3wFIikfy_xN81jExVvnfXw&pli=1:31 +[ 154631ms] [LOG] %c%s color: red; background: yellow; font-size: 24px; 警告！ @ https://www.gstatic.com/_/mss/boq-googlegrowth/_/js/k=boq-googlegrowth.GrowthOnboardUi.zh_CN.ioB14O7n23c.2018.O/am=AAAAAHYAMAAAQAI/d=1/excm=_b,_tp,landingview/ed=1/dg=0/wt=2/ujg=1/rs=AF-uQDmPwrq_ndujYUhyytGzCRUkQcNH0g/dti=1/m=_b,_tp:332 +[ 154631ms] [LOG] %c%s font-size: 18px; 使用此控制台可能会导致攻击程序利用 Self-XSS 攻击冒充您并窃取您的信息。 +请勿输入或粘贴您不明白的代码。 @ https://www.gstatic.com/_/mss/boq-googlegrowth/_/js/k=boq-googlegrowth.GrowthOnboardUi.zh_CN.ioB14O7n23c.2018.O/am=AAAAAHYAMAAAQAI/d=1/excm=_b,_tp,landingview/ed=1/dg=0/wt=2/ujg=1/rs=AF-uQDmPwrq_ndujYUhyytGzCRUkQcNH0g/dti=1/m=_b,_tp:332 +[ 154897ms] [INFO] Slow network is detected. See https://www.chromestatus.com/feature/5636954674692096 for more details. Fallback font will be used while loading: https://fonts.gstatic.com/s/googlesans/v58/4UaRrENHsxJlGDuGo1OIlJfC6l_24rlCK1Yo_Iq2vgCI.woff2 @ https://gds.google.com/web/stalehomeaddress?cardIndex=0&hl=zh-CN&authuser=0&tda=CAA&gdsid=-1480908174&continue=https%3A%2F%2Faccounts.google.com%2FServiceLogin%3Fcontinue%3Dhttps%3A%2F%2Fstitch.withgoogle.com%2Fprojects%2F15895967252002871735%26hl%3Dzh-CN%26authuser%3D0%26passive%3Dtrue%26sarp%3D1%26aodrpl%3D1%26checkedDomains%3Dyoutube%26checkConnection%3Dyoutube%3A228%26pstMsg%3D1%26osid%3D1&rapt=AEjHL4OGh1_Ie6ktrf5L9ZlPAguwlDK1e3LOMxiyn8-zq7daWqvQl0lfUCYn62hwXaTIFwNWhOrh3wFIikfy_xN81jExVvnfXw&ep=p:0 +[ 154897ms] [INFO] Slow network is detected. See https://www.chromestatus.com/feature/5636954674692096 for more details. Fallback font will be used while loading: https://fonts.gstatic.com/s/googlematerialicons/v144/Gw6kwdfw6UnXLJCcmafZyFRXb3BL9rvi0QZG3Q.woff2 @ https://gds.google.com/web/stalehomeaddress?cardIndex=0&hl=zh-CN&authuser=0&tda=CAA&gdsid=-1480908174&continue=https%3A%2F%2Faccounts.google.com%2FServiceLogin%3Fcontinue%3Dhttps%3A%2F%2Fstitch.withgoogle.com%2Fprojects%2F15895967252002871735%26hl%3Dzh-CN%26authuser%3D0%26passive%3Dtrue%26sarp%3D1%26aodrpl%3D1%26checkedDomains%3Dyoutube%26checkConnection%3Dyoutube%3A228%26pstMsg%3D1%26osid%3D1&rapt=AEjHL4OGh1_Ie6ktrf5L9ZlPAguwlDK1e3LOMxiyn8-zq7daWqvQl0lfUCYn62hwXaTIFwNWhOrh3wFIikfy_xN81jExVvnfXw&ep=p:0 +[ 154899ms] [INFO] Slow network is detected. See https://www.chromestatus.com/feature/5636954674692096 for more details. Fallback font will be used while loading: https://fonts.gstatic.com/s/googlesanstext/v25/5aUu9-KzpRiLCAt4Unrc-xIKmCU5qEp2iw.woff2 @ https://gds.google.com/web/stalehomeaddress?cardIndex=0&hl=zh-CN&authuser=0&tda=CAA&gdsid=-1480908174&continue=https%3A%2F%2Faccounts.google.com%2FServiceLogin%3Fcontinue%3Dhttps%3A%2F%2Fstitch.withgoogle.com%2Fprojects%2F15895967252002871735%26hl%3Dzh-CN%26authuser%3D0%26passive%3Dtrue%26sarp%3D1%26aodrpl%3D1%26checkedDomains%3Dyoutube%26checkConnection%3Dyoutube%3A228%26pstMsg%3D1%26osid%3D1&rapt=AEjHL4OGh1_Ie6ktrf5L9ZlPAguwlDK1e3LOMxiyn8-zq7daWqvQl0lfUCYn62hwXaTIFwNWhOrh3wFIikfy_xN81jExVvnfXw&ep=p:0 +[ 155043ms] [WARNING] Blocked aria-hidden on an element because its descendant retained focus. The focus must not be hidden from assistive technology users. Avoid using aria-hidden on a focused element or its ancestor. Consider using the inert attribute instead, which will also prevent focus. For more details, see the aria-hidden section of the WAI-ARIA specification at https://w3c.github.io/aria/#aria-hidden. +Element with focus: +Ancestor with aria-hidden: @ https://gds.google.com/web/stalehomeaddress?cardIndex=0&hl=zh-CN&authuser=0&tda=CAA&gdsid=-1480908174&continue=https%3A%2F%2Faccounts.google.com%2FServiceLogin%3Fcontinue%3Dhttps%3A%2F%2Fstitch.withgoogle.com%2Fprojects%2F15895967252002871735%26hl%3Dzh-CN%26authuser%3D0%26passive%3Dtrue%26sarp%3D1%26aodrpl%3D1%26checkedDomains%3Dyoutube%26checkConnection%3Dyoutube%3A228%26pstMsg%3D1%26osid%3D1&rapt=AEjHL4OGh1_Ie6ktrf5L9ZlPAguwlDK1e3LOMxiyn8-zq7daWqvQl0lfUCYn62hwXaTIFwNWhOrh3wFIikfy_xN81jExVvnfXw&ep=p:0 +[ 159828ms] [WARNING] Google Maps JavaScript API has been loaded directly without loading=async. This can result in suboptimal performance. For best-practice loading patterns please see https://goo.gle/js-api-loading @ https://maps.googleapis.com/maps/api/js?v=3&key=AIzaSyB9MsC71BYl5PHnyUUhy15GY6TlMitB4PU&language=zh-CN®ion=US&libraries=places&callback=initGhsMapService:1386 +[ 159833ms] [WARNING] As of March 1st, 2025, google.maps.places.AutocompleteService is not available to new customers. Please use google.maps.places.AutocompleteSuggestion instead. At this time, google.maps.places.AutocompleteService is not scheduled to be discontinued, but google.maps.places.AutocompleteSuggestion is recommended over google.maps.places.AutocompleteService. While google.maps.places.AutocompleteService will continue to receive bug fixes for any major regressions, existing bugs in google.maps.places.AutocompleteService will not be addressed. At least 12 months notice will be given before support is discontinued. Please see https://developers.google.com/maps/legacy for additional details and https://developers.google.com/maps/documentation/javascript/places-migration-overview for the migration guide. @ https://maps.googleapis.com/maps/api/js?v=3&key=AIzaSyB9MsC71BYl5PHnyUUhy15GY6TlMitB4PU&language=zh-CN®ion=US&libraries=places&callback=initGhsMapService:60 +[ 160491ms] [WARNING] As of March 1st, 2025, google.maps.places.AutocompleteService is not available to new customers. Please use google.maps.places.AutocompleteSuggestion instead. At this time, google.maps.places.AutocompleteService is not scheduled to be discontinued, but google.maps.places.AutocompleteSuggestion is recommended over google.maps.places.AutocompleteService. While google.maps.places.AutocompleteService will continue to receive bug fixes for any major regressions, existing bugs in google.maps.places.AutocompleteService will not be addressed. At least 12 months notice will be given before support is discontinued. Please see https://developers.google.com/maps/legacy for additional details and https://developers.google.com/maps/documentation/javascript/places-migration-overview for the migration guide. @ https://maps.googleapis.com/maps/api/js?v=3&key=AIzaSyB9MsC71BYl5PHnyUUhy15GY6TlMitB4PU&language=zh-CN®ion=US&libraries=places&callback=initGhsMapService:60 +[ 165800ms] [INFO] Slow network is detected. See https://www.chromestatus.com/feature/5636954674692096 for more details. Fallback font will be used while loading: https://fonts.gstatic.com/s/materialiconsextended/v154/kJEjBvgX7BgnkSrUwT8UnLVc38YydejYY-oE_LvJ.woff2 @ https://gds.google.com/web/pgc?cardIndex=1&hl=zh-CN&authuser=0&tda=CAA&gdsid=-1480908174&continue=https%3A%2F%2Faccounts.google.com%2FServiceLogin%3Fcontinue%3Dhttps%3A%2F%2Fstitch.withgoogle.com%2Fprojects%2F15895967252002871735%26hl%3Dzh-CN%26authuser%3D0%26passive%3Dtrue%26sarp%3D1%26aodrpl%3D1%26checkedDomains%3Dyoutube%26checkConnection%3Dyoutube%3A228%26pstMsg%3D1%26osid%3D1&rapt=AEjHL4OGh1_Ie6ktrf5L9ZlPAguwlDK1e3LOMxiyn8-zq7daWqvQl0lfUCYn62hwXaTIFwNWhOrh3wFIikfy_xN81jExVvnfXw&ep=p:0 +[ 172155ms] [INFO] Slow network is detected. See https://www.chromestatus.com/feature/5636954674692096 for more details. Fallback font will be used while loading: https://fonts.gstatic.com/s/googlesans/v58/4Ua_rENHsxJlGDuGo1OIlJfC6l_24rlCK1Yo_Iqcsih3SAyH6cAwhX9RFD48TE63OOYKtrwEIJllpyk.woff2 @ https://stitch.withgoogle.com/projects/15895967252002871735?pli=1:0 +[ 174034ms] [INFO] Slow network is detected. See https://www.chromestatus.com/feature/5636954674692096 for more details. Fallback font will be used while loading: https://fonts.gstatic.com/s/materialsymbolsoutlined/v326/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzaxHMPdY43zj-jCxv3fzvRNU22ZXGJpEpjC_1v-p_4MrImHCIJIZrDCvHOej.woff2 @ https://app-companion-430619.appspot.com/assets/util-Cb2bb2N4.js:420 +[ 210937ms] [ERROR] [deriveInstancesFromNodes] Found mismatching nodes for projects/15895967252002871735. Filtered out 1 nodes. @ https://app-companion-430619.appspot.com/assets/util-Cb2bb2N4.js:403 +[ 211752ms] [WARNING] cdn.tailwindcss.com should not be used in production. To use Tailwind CSS in production, install it as a PostCSS plugin or use the Tailwind CLI: https://tailwindcss.com/docs/installation @ https://cdn.tailwindcss.com/?plugins=forms,container-queries:63 +[ 211777ms] [WARNING] cdn.tailwindcss.com should not be used in production. To use Tailwind CSS in production, install it as a PostCSS plugin or use the Tailwind CLI: https://tailwindcss.com/docs/installation @ https://cdn.tailwindcss.com/?plugins=forms,container-queries:63 +[ 1375864ms] [WARNING] cdn.tailwindcss.com should not be used in production. To use Tailwind CSS in production, install it as a PostCSS plugin or use the Tailwind CLI: https://tailwindcss.com/docs/installation @ https://cdn.tailwindcss.com/?plugins=forms,container-queries:63 +[ 1412733ms] [WARNING] cdn.tailwindcss.com should not be used in production. To use Tailwind CSS in production, install it as a PostCSS plugin or use the Tailwind CLI: https://tailwindcss.com/docs/installation @ https://cdn.tailwindcss.com/?plugins=forms,container-queries:63 +[ 1412761ms] [WARNING] cdn.tailwindcss.com should not be used in production. To use Tailwind CSS in production, install it as a PostCSS plugin or use the Tailwind CLI: https://tailwindcss.com/docs/installation @ https://cdn.tailwindcss.com/?plugins=forms,container-queries:63 +[ 1428808ms] [WARNING] cdn.tailwindcss.com should not be used in production. To use Tailwind CSS in production, install it as a PostCSS plugin or use the Tailwind CLI: https://tailwindcss.com/docs/installation @ https://cdn.tailwindcss.com/?plugins=forms,container-queries:63 +[ 1512057ms] [WARNING] cdn.tailwindcss.com should not be used in production. To use Tailwind CSS in production, install it as a PostCSS plugin or use the Tailwind CLI: https://tailwindcss.com/docs/installation @ https://cdn.tailwindcss.com/?plugins=forms,container-queries:63 +[ 1514160ms] [WARNING] cdn.tailwindcss.com should not be used in production. To use Tailwind CSS in production, install it as a PostCSS plugin or use the Tailwind CLI: https://tailwindcss.com/docs/installation @ https://cdn.tailwindcss.com/?plugins=forms,container-queries:63 +[ 1517339ms] [WARNING] cdn.tailwindcss.com should not be used in production. To use Tailwind CSS in production, install it as a PostCSS plugin or use the Tailwind CLI: https://tailwindcss.com/docs/installation @ https://cdn.tailwindcss.com/?plugins=forms,container-queries:63 +[ 1520404ms] [WARNING] cdn.tailwindcss.com should not be used in production. To use Tailwind CSS in production, install it as a PostCSS plugin or use the Tailwind CLI: https://tailwindcss.com/docs/installation @ https://cdn.tailwindcss.com/?plugins=forms,container-queries:63 +[ 1534484ms] [ERROR] Icon not found: "ArrowsHorizontal". You must import it AND add it to the importedIcons list in Icon.tsx. @ https://app-companion-430619.appspot.com/assets/util-Cb2bb2N4.js:403 +[ 1534485ms] [ERROR] Icon not found: "ArrowsVertical". You must import it AND add it to the importedIcons list in Icon.tsx. @ https://app-companion-430619.appspot.com/assets/util-Cb2bb2N4.js:403 +[ 1544052ms] [ERROR] Icon not found: "ArrowsHorizontal". You must import it AND add it to the importedIcons list in Icon.tsx. @ https://app-companion-430619.appspot.com/assets/util-Cb2bb2N4.js:403 +[ 1544052ms] [ERROR] Icon not found: "ArrowsVertical". You must import it AND add it to the importedIcons list in Icon.tsx. @ https://app-companion-430619.appspot.com/assets/util-Cb2bb2N4.js:403 +[ 1586621ms] [WARNING] cdn.tailwindcss.com should not be used in production. To use Tailwind CSS in production, install it as a PostCSS plugin or use the Tailwind CLI: https://tailwindcss.com/docs/installation @ https://cdn.tailwindcss.com/?plugins=forms,container-queries:63 +[ 1588245ms] [WARNING] cdn.tailwindcss.com should not be used in production. To use Tailwind CSS in production, install it as a PostCSS plugin or use the Tailwind CLI: https://tailwindcss.com/docs/installation @ https://cdn.tailwindcss.com/?plugins=forms,container-queries:63 +[ 1590235ms] [WARNING] cdn.tailwindcss.com should not be used in production. To use Tailwind CSS in production, install it as a PostCSS plugin or use the Tailwind CLI: https://tailwindcss.com/docs/installation @ https://cdn.tailwindcss.com/?plugins=forms,container-queries:63 +[ 1594799ms] [WARNING] cdn.tailwindcss.com should not be used in production. To use Tailwind CSS in production, install it as a PostCSS plugin or use the Tailwind CLI: https://tailwindcss.com/docs/installation @ https://cdn.tailwindcss.com/?plugins=forms,container-queries:63 diff --git a/App.vue b/App.vue index 4ebdfce..a22ffa8 100644 --- a/App.vue +++ b/App.vue @@ -100,9 +100,9 @@ // ========== 卡片组件 ========== .card { background-color: $bg-card; - border-radius: $radius-lg; + border-radius: 0; padding: 28rpx 24rpx; - margin-bottom: 20rpx; + margin-bottom: 0; box-shadow: $shadow-sm; } @@ -130,10 +130,10 @@ // 表单容器卡片样式 .form-card { background-color: $bg-card; - border-radius: $radius-lg; + border-radius: 0; padding: 20rpx 24rpx; - margin: 16rpx 0; - box-shadow: $shadow-sm; + margin: 0; + box-shadow: none; } // ========== 按钮美化 ========== diff --git a/components/xtUpload.vue b/components/xtUpload.vue index fbfc79c..6c2bd25 100644 --- a/components/xtUpload.vue +++ b/components/xtUpload.vue @@ -9,6 +9,16 @@ + + + + + {{ previewItem?.name }} + × + + + + @@ -35,6 +45,8 @@ const props = defineProps({ // ⚠ reactive([]) 不能整体赋值，用 ref 更合理 const fileList = ref([]) const disabled = ref(props.disabled) +const showPreview = ref(false) +const previewItem = ref(null) // header / action const header = { @@ -205,27 +217,8 @@ const preview = (item) => { } }) } else if (item.type == 10) { - window.open(item.url, '_blank'); - // uni.downloadFile({ - // url: item.url, - // success: function (res) { - // var filePath = res.tempFilePath; - // uni.openDocument({ - // filePath: filePath, - // showMenu: true, - // success: function (res) { - // console.log('打开文档成功'); - // } - // }); - // }, - // fail: function (err) { - // console.log("下载失败:", err) - // uni.showToast({ - // title: "下载失败", - // icon: "none" - // }) - // } - // }); + previewItem.value = item + showPreview.value = true } else if (item.type == 20) { uni.showToast({ title: "暂不支持预览该文件", @@ -319,3 +312,56 @@ const choseFiles = () => { }) } + + diff --git a/pages/asm/assetlogin_form.vue b/pages/asm/assetlogin_form.vue index d56474d..d9a2f23 100644 --- a/pages/asm/assetlogin_form.vue +++ b/pages/asm/assetlogin_form.vue @@ -249,8 +249,8 @@ export default {