inkreachhub/inkreach-official-website
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(deploy): production deployment setup and fixes

Browse Source 
- Debian-based api image (bookworm-slim), docker/debian mirrors, prisma
  binaryTargets for openssl 3.0
- nginx: admin SPA under /admin, TLS via acme.sh (ZeroSSL) + auto-renewal
  cron, http->https redirect
- prisma: add origin_goods.delisted migration, sync missing schema
  (good_image/tag_font_color/good_tags), fix users.createdAt Timestamptz
- api: CORS wildcard reflection, helmet CORP cross-origin, price
  backfill in persistProductDetail, categoryIcon ancestor fallback,
  mediaByColor per-color gallery in public goods detail
- admin: /admin base path (vite + router)
- import-data.mjs: udt_name casting, serial sequence advance fix
This commit is contained in:
yeuimu
2026-08-26 14:23:09 +08:00
parent be0b90e68f
commit 6c61a4e871
982 changed files with 74156 additions and 179393 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/website/.agents/skills/vue-debug-guides/reference/multi-root-component-class-attrs.md
+93 -93
View File
@@ -1,93 +1,93 @@
# Multi-Root Component Class Attribute Inheritance
## Rule
When a Vue 3 component has multiple root elements, class and style bindings from the parent will NOT automatically fall through. You must explicitly bind `$attrs.class` or `$attrs.style` to the target element.
## Why This Matters
- Vue 3 components can have multiple root elements (fragments)
- Unlike single-root components, multi-root components have no automatic attribute fallthrough
- Without explicit handling, classes and styles passed from parent are silently ignored
- Vue will emit a runtime warning, but styles/classes simply won't apply
## Bad Code
```vue
<!-- ChildComponent.vue - WRONG: classes from parent won't apply -->
<template>
<header>Header</header>
<main>Content</main>
<footer>Footer</footer>
</template>
<!-- Parent usage -->
<ChildComponent class="my-custom-class" />
<!-- Result: my-custom-class is NOT applied to any element -->
```
## Good Code
```vue
<!-- ChildComponent.vue - CORRECT: explicitly bind $attrs.class -->
<template>
<header>Header</header>
<main :class="$attrs.class" :style="$attrs.style">Content</main>
<footer>Footer</footer>
</template>
<!-- Or bind all attrs to one element -->
<template>
<header>Header</header>
<main v-bind="$attrs">Content</main>
<footer>Footer</footer>
</template>
```
## Accessing $attrs in script setup
```vue
<script setup>
import { useAttrs } from 'vue'
const attrs = useAttrs()
// attrs.class and attrs.style are available
</script>
<template>
<header>Header</header>
<main :class="attrs.class">Content</main>
<footer>Footer</footer>
</template>
```
## Disabling Automatic Inheritance
For single-root components where you want to control attribute placement:
```vue
<script>
export default {
inheritAttrs: false
}
</script>
<script setup>
import { useAttrs } from 'vue'
const attrs = useAttrs()
</script>
<template>
<div class="wrapper">
<input v-bind="attrs" />
</div>
</template>
```
## Vue 2 to Vue 3 Migration Note
In Vue 2, `$attrs` did NOT include `class` and `style`. In Vue 3, `$attrs` contains ALL attributes including `class` and `style`. This is a breaking change that affects how you handle attribute forwarding.
## References
- [Fallthrough Attributes](https://vuejs.org/guide/components/attrs.html)
- [Vue 3 Migration Guide - $attrs includes class & style](https://v3-migration.vuejs.org/breaking-changes/attrs-includes-class-style)
# Multi-Root Component Class Attribute Inheritance
## Rule
When a Vue 3 component has multiple root elements, class and style bindings from the parent will NOT automatically fall through. You must explicitly bind `$attrs.class` or `$attrs.style` to the target element.
## Why This Matters
- Vue 3 components can have multiple root elements (fragments)
- Unlike single-root components, multi-root components have no automatic attribute fallthrough
- Without explicit handling, classes and styles passed from parent are silently ignored
- Vue will emit a runtime warning, but styles/classes simply won't apply
## Bad Code
```vue
<!-- ChildComponent.vue - WRONG: classes from parent won't apply -->
<template>
<header>Header</header>
<main>Content</main>
<footer>Footer</footer>
</template>
<!-- Parent usage -->
<ChildComponent class="my-custom-class" />
<!-- Result: my-custom-class is NOT applied to any element -->
```
## Good Code
```vue
<!-- ChildComponent.vue - CORRECT: explicitly bind $attrs.class -->
<template>
<header>Header</header>
<main :class="$attrs.class" :style="$attrs.style">Content</main>
<footer>Footer</footer>
</template>
<!-- Or bind all attrs to one element -->
<template>
<header>Header</header>
<main v-bind="$attrs">Content</main>
<footer>Footer</footer>
</template>
```
## Accessing $attrs in script setup
```vue
<script setup>
import { useAttrs } from 'vue'
const attrs = useAttrs()
// attrs.class and attrs.style are available
</script>
<template>
<header>Header</header>
<main :class="attrs.class">Content</main>
<footer>Footer</footer>
</template>
```
## Disabling Automatic Inheritance
For single-root components where you want to control attribute placement:
```vue
<script>
export default {
inheritAttrs: false
}
</script>
<script setup>
import { useAttrs } from 'vue'
const attrs = useAttrs()
</script>
<template>
<div class="wrapper">
<input v-bind="attrs" />
</div>
</template>
```
## Vue 2 to Vue 3 Migration Note
In Vue 2, `$attrs` did NOT include `class` and `style`. In Vue 3, `$attrs` contains ALL attributes including `class` and `style`. This is a breaking change that affects how you handle attribute forwarding.
## References
- [Fallthrough Attributes](https://vuejs.org/guide/components/attrs.html)
- [Vue 3 Migration Guide - $attrs includes class & style](https://v3-migration.vuejs.org/breaking-changes/attrs-includes-class-style)