feat(exception): Add pc templates, document examples, and dark mode support #3736
Conversation
WalkthroughAdded PC-mode Exception component and PC demos, updated API metadata and demos for both pc and mobile-first, introduced IType, added theme styles and vars, included exception styles in Vue build, adjusted i18n strings, added docs/menu entry, and fixed a dark-theme import typo. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
participant Demo as Demo App
participant Exception as TinyException (pc.vue)
participant Button as TinyButton
participant Modal as TinyModal
Demo->>Exception: render(props {type, subMessage, ...})
Note right of Exception: select icon/text from constants\nrender icon/content/footer slots
Demo->>Button: place primary action in slot
Button->>Modal: onClick -> Modal.message(...)
Modal-->>Demo: show notification
sequenceDiagram
autonumber
participant Consumer as Consumer Importer
participant Entry as exception/src/index.ts
participant VT as virtual-template
participant PC as pc.vue
participant MF as mobile-first template
Consumer->>Entry: import Exception
Entry->>VT: resolve "pc|mobile-first"
alt PC template selected
VT-->>PC: load pc.vue
else mobile-first selected
VT-->>MF: load mobile-first template
end
Note right of Entry: styles imported via @opentiny/vue-theme/exception/index.less
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches
🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
discreted66
force-pushed
the
lk-09232
branch
2 times, most recently
from
38cc04e to
ac8e734
Compare
discreted66
force-pushed
the
lk-09232
branch
from
ac8e734 to
d1a5523
Compare
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 5
🧹 Nitpick comments (15)
examples/sites/demos/pc/app/exception/button-text-composition-api.vue (1)
3-3: Prefer a descriptive handler name overtestRenaming clarifies intent and avoids potential confusion with testing globals.
Apply:
- <tiny-button type="primary" @click="test">自定义按钮</tiny-button> + <tiny-button type="primary" @click="handleClick">自定义按钮</tiny-button> @@ -const test = () => { +const handleClick = () => { TinyModal.message({ status: 'info', message: '自定义按钮被点击' }) }Also applies to: 10-12
packages/theme/src/exception/vars.less (1)
8-9: Fix mislabeled comment (“一级标题” -> “二级标题”).Comment does not match the variable it describes.
Apply:
- // 一级标题字体大小 + // 二级标题字体大小examples/sites/demos/pc/app/exception/webdoc/exception.js (3)
60-70: Correct wrong English description for “button-text” demo and improve name.Current en-US desc is a copy of “sub-message.” Suggest clearer text and name.
Apply:
- name: { - 'zh-CN': '自定义按钮文本', - 'en-US': 'button-text' - }, + name: { + 'zh-CN': '自定义按钮文本', + 'en-US': 'Custom Button Text' + }, desc: { - 'zh-CN': '<p>已去除`button-text`自定义按钮文本，直接可以通过插槽自定义</p>', - 'en-US': '<p>Customizing Level-2 Titles Using `sub-message`</p>' + 'zh-CN': '<p>已移除 `button-text` 属性，可通过插槽自定义按钮内容</p>', + 'en-US': '<p>The `button-text` prop has been removed. Customize button content via slots.</p>' },
20-31: Polish English copy for page exception description (optional).Minor clarity/tone improvements.
Apply:
- 'en-US': - '<p>The page exception is displayed by adding the `page-empty` attribute. The type types include `pagenoperm`, `pageweaknet`, `pagenothing`, and `pageservererror`.<br>Scenario:<br>`pagenoperm`: no access permission<br>`pageweaknet`: network exception<br>`pagenothing`: The page you access does not exist<br>`pageservererror`: The server is abnormal</p>' + 'en-US': + '<p>Display a page-level exception via the `page-empty` attribute. Supported types: `pagenoperm` (no access), `pageweaknet` (network error), `pagenothing` (page not found), `pageservererror` (server error).</p>'
34-46: Polish English copy for component exception description (optional).Improve phrasing; keep meanings intact.
Apply:
- 'en-US': - '<p>Add the `component-empty` attribute to display the component exception. The type type can be `noperm`, `nodata`, `weaknet`, `noresult`, or `nonews`<br>The corresponding scenario is as follows: <br>`noperm`: No access<br>`nodata`: no data<br>`weaknet`: network is not powerful<br>`noresult`: no related search results<br>`nonews`: no latest news<br></p>' + 'en-US': + '<p>Display a component-level exception via the `component-empty` attribute. Types: `noperm` (no access), `nodata` (no data), `weaknet` (poor network), `noresult` (no search results), `nonews` (no latest news).</p>'packages/theme/src/exception/index.less (3)
61-68: BEM naming: verify element vs modifier for “component-page”.Class is
__component-page(element). If this is a state modifier, consider--component-pagefor consistency, or ensure the template addstiny-exception__component-page.Optionally align selector to prefix vars for consistency:
- &__component-page { - .tiny-exception__image svg { + &__component-page { + .@{exception-prefix-cls}__image .@{svg-prefix-cls} { width: 96px; height: 96px; } }
29-33: Selector consistency (optional).Inside
&__imageyou target.tiny-svg, but in the component-page block you target rawsvg. Prefer consistent targeting.
35-47: Tokenize line-height (optional).Consider using a var for the 30px line-height to match theming patterns.
packages/vue/src/exception/src/index.ts (1)
7-25: Docs/demos referencecomponent-emptybut the prop iscomponentPage(component-page) — align names or add an alias.
component-emptyappears in webdoc/demo IDs and filenames (examples/sites/demos/.../webdoc/exception.js, component-empty.vue) while the component defines propcomponentPage(packages/vue/src/exception/src/index.ts) and templates usecomponent-page. Update docs/examples to usecomponent-page/componentPageor add a backward-compatible alias prop (componentEmpty/component-empty) that maps tocomponentPage.examples/sites/demos/pc/app/exception/component-empty.vue (1)
52-54: Remove unused CSS or apply it to panes.
.demo-split-paneisn’t used. Either remove the styles or wrap pane content to use them.Example applying the class:
<template #left> - <tiny-exception component-page type="nodata"></tiny-exception> + <div class="demo-split-pane"> + <tiny-exception component-page type="nodata"></tiny-exception> + </div> </template> <template #right> - <tiny-exception component-page type="nodata"></tiny-exception> + <div class="demo-split-pane"> + <tiny-exception component-page type="nodata"></tiny-exception> + </div> </template>examples/sites/demos/pc/app/exception/webdoc/exception.cn.md (1)
5-5: Enrich doc with a brief intro and version note.Add a short description and “since” info to align with menu metadata.
# Exception 缺省页 + +用于在页面或组件无数据、无权限或错误等状态下展示统一的缺省信息与引导操作。 + +自 3.27.0 起提供。examples/sites/demos/pc/app/exception/webdoc/exception.en.md (1)
5-5: Add a short description and “since” note.Keep consistency with Chinese doc and menus metadata.
# Exception + +Use standardized empty/exception pages to indicate no data, no permission, or server errors, with optional guidance actions. + +Available since 3.27.0.examples/sites/demos/pc/app/exception/component-empty-composition-api.vue (1)
34-39: Use theme token instead of hard-coded border color (dark mode).
#d9d9d9may not adapt to dark mode. Prefer a design token/var from the Tiny theme (e.g., a common border/divider color).Example (adjust token to your theme variable naming):
.demo-split { height: 200px; - border: 1px solid #d9d9d9; + border: 1px solid var(--ti-common-color-border, #d9d9d9); margin-bottom: 20px; }packages/vue/src/exception/src/pc.vue (2)
6-6: Dynamic icon resolution via string names is brittle; prefer component refs.Using strings from ICONCONFIG relies on name resolution. Mapping directly to imported component objects is safer.
- ICONCONFIG: { - NODATA: 'icon-no-data', - NOPERM: 'icon-no-perm', - NONEWS: 'icon-no-news', - WEAKNET: 'icon-weaknet', - NORESULT: 'icon-no-result', - PAGENOPERM: 'icon-page-noperm', - PAGENOTHING: 'icon-page-nothing', - PAGESERVERERROR: 'icon-page-servererror', - PAGEWEAKNET: 'icon-page-weaknet' - } + ICONCONFIG: { + NODATA: iconNoData(), + NOPERM: iconNoPerm(), + NONEWS: iconNoNews(), + WEAKNET: iconWeaknet(), + NORESULT: iconNoResult(), + PAGENOPERM: iconPageNoperm(), + PAGENOTHING: iconPageNothing(), + PAGESERVERERROR: iconPageServererror(), + PAGEWEAKNET: iconPageWeaknet() + }And in the template:
- <component :is="_constants.ICONCONFIG[type.toUpperCase()]" v-if="state.urlType" /> + <component :is="_constants.ICONCONFIG[type.toUpperCase()]" v-if="state.urlType" />(No template change needed beyond the map; included for clarity.)
29-30: Remove unused TinyButton registration or wire up click emit.
TinyButtonis imported/registered but unused. Either remove it or provide a default action that emitsclick.-import Button from '@opentiny/vue-button' +// import Button from '@opentiny/vue-button' ... - TinyButton: Button, + // TinyButton: Button,Alternatively, forward root clicks:
- emits: ['click'], + emits: ['click'], ... - <div class="tiny-exception" :class="exceptionClass"> + <div class="tiny-exception" :class="exceptionClass" @click="$emit('click')">
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (9)
packages/theme/src/svgs/no-data.svgis excluded by!**/*.svgpackages/theme/src/svgs/no-news.svgis excluded by!**/*.svgpackages/theme/src/svgs/no-perm.svgis excluded by!**/*.svgpackages/theme/src/svgs/no-result.svgis excluded by!**/*.svgpackages/theme/src/svgs/page-noperm.svgis excluded by!**/*.svgpackages/theme/src/svgs/page-nothing.svgis excluded by!**/*.svgpackages/theme/src/svgs/page-servererror.svgis excluded by!**/*.svgpackages/theme/src/svgs/page-weaknet.svgis excluded by!**/*.svgpackages/theme/src/svgs/weaknet.svgis excluded by!**/*.svg
📒 Files selected for processing (28)
examples/sites/demos/apis/exception.js(5 hunks)examples/sites/demos/pc/app/exception/basic-usage-composition-api.vue(1 hunks)examples/sites/demos/pc/app/exception/basic-usage.vue(1 hunks)examples/sites/demos/pc/app/exception/button-text-composition-api.vue(1 hunks)examples/sites/demos/pc/app/exception/button-text.vue(1 hunks)examples/sites/demos/pc/app/exception/component-empty-composition-api.vue(1 hunks)examples/sites/demos/pc/app/exception/component-empty.vue(1 hunks)examples/sites/demos/pc/app/exception/page-empty-composition-api.vue(1 hunks)examples/sites/demos/pc/app/exception/page-empty.vue(1 hunks)examples/sites/demos/pc/app/exception/slot-composition-api.vue(1 hunks)examples/sites/demos/pc/app/exception/slot.vue(1 hunks)examples/sites/demos/pc/app/exception/sub-message-composition-api.vue(1 hunks)examples/sites/demos/pc/app/exception/sub-message.vue(1 hunks)examples/sites/demos/pc/app/exception/webdoc/exception.cn.md(1 hunks)examples/sites/demos/pc/app/exception/webdoc/exception.en.md(1 hunks)examples/sites/demos/pc/app/exception/webdoc/exception.js(1 hunks)examples/sites/demos/pc/menus.js(1 hunks)packages/theme/src/dark-theme-index.less(1 hunks)packages/theme/src/exception/index.less(1 hunks)packages/theme/src/exception/vars.less(1 hunks)packages/theme/src/index.less(1 hunks)packages/vue-locale/src/lang/en.ts(1 hunks)packages/vue-locale/src/lang/es-LA.ts(1 hunks)packages/vue-locale/src/lang/pt-BR.ts(1 hunks)packages/vue-locale/src/lang/zh-CN.ts(1 hunks)packages/vue/src/exception/index.ts(1 hunks)packages/vue/src/exception/src/index.ts(1 hunks)packages/vue/src/exception/src/pc.vue(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: PR E2E Test (pnpm test:e2e3)
🔇 Additional comments (24)
examples/sites/demos/pc/app/exception/button-text-composition-api.vue (2)
1-5: LGTM — clean, minimal demoComposition API usage and auto-registered components look correct.
2-2: Confirmed:type="pagenoperm"is valid — PAGENOPERM is defined in packages/vue/src/exception/src/pc.vue and mobile-first.vue, locale keys exist (en/zh-CN/es-LA/pt-BR), page-noperm SVGs are present, and examples use it.packages/vue-locale/src/lang/en.ts (1)
268-268: LGTM — “No data available.” aligns with other en no-data stringsConsistent with cascader/grid “No data available.”.
packages/vue-locale/src/lang/es-LA.ts (1)
268-268: LGTM — “No hay datos disponibles.”Matches other es-LA no-data strings in this file.
packages/vue-locale/src/lang/pt-BR.ts (1)
268-268: LGTM — “Não há dados disponíveis.”Consistent with pt-BR usage elsewhere.
packages/vue-locale/src/lang/zh-CN.ts (1)
268-268: LGTM — 文案“暂无数据”与本文件其它无数据提示保持一致
与 buttonGroup/grid 等处“暂无数据”一致，语义更明确。为避免旧文案残留，请在仓库中查找并替换旧的“休息一下”/“Get some rest”等多语言表述（示例：rg -n -S -i '休息一下|Get some rest|Descansa un poco|Descanse um pouco'）。packages/theme/src/dark-theme-index.less (1)
1-1: LGTMImport fixed; no issues.
examples/sites/demos/pc/app/exception/page-empty-composition-api.vue (1)
1-7: LGTMDemo wiring with
<script setup>is correct; props map (page-empty/sub-message) align with component.examples/sites/demos/pc/app/exception/page-empty.vue (1)
1-13: LGTMLocal registration matches template usage; content mirrors composition-API demo.
examples/sites/demos/pc/app/exception/webdoc/exception.js (1)
2-2: Verify type ofcolumn.Config often uses a number (2) vs string ('2'). Confirm the expected type for the docs site.
packages/theme/src/exception/index.less (1)
8-18: LGTM on structure and var injection.Layout, var usage, and spacing look solid.
packages/theme/src/index.less (1)
57-57: LGTMImporting exception styles into the theme index is correct.
packages/vue/src/exception/src/index.ts (1)
2-2: virtual-template union supported; pc.vue present
The unplugin parses the query by '|' and emits imports for ./.vue (dev and build paths handle it); packages/vue/src/exception/src/pc.vue exists.examples/sites/demos/pc/menus.js (1)
286-293: Version metadata added — verify final version before release.The
meta.stable: '3.27.0'addresses the earlier request to include version info. Please confirm it matches the actual release tag.examples/sites/demos/pc/app/exception/sub-message.vue (1)
1-12: LGTM — clear demo of sub-message usage.packages/vue/src/exception/index.ts (1)
14-14: LGTM — theme side‑effect import wired.Style import aligns the component with the new theme entry.
examples/sites/demos/pc/app/exception/basic-usage.vue (1)
1-14: LGTM — concise basic usage demo.examples/sites/demos/pc/app/exception/sub-message-composition-api.vue (1)
1-7: LGTMDemo correctly showcases sub-message with a PC type.
examples/sites/demos/pc/app/exception/basic-usage-composition-api.vue (1)
1-15: LGTMClear basic PC demo; scoped padding is fine.
examples/sites/demos/pc/app/exception/button-text.vue (1)
1-21: LGTMGood example of action slot; TinyModal usage is appropriate.
packages/vue/src/exception/src/pc.vue (3)
4-4: Remove Tailwind class from PC template.Found
bg-coveron Line 4. Tailwind shouldn’t appear in PC templates here.- <div class="tiny-exception__image bg-cover"> + <div class="tiny-exception__image">If needed, add equivalent CSS in theme styles.
81-102: Verify props that currently don’t affect template structure.
pageEmptyandcomponentPagearen’t used in the template for conditional classes/layout. Ensure renderless logic or styles still differentiate page vs component modes; otherwise add class bindings.Example:
- <div class="tiny-exception" :class="exceptionClass"> + <div + class="tiny-exception" + :class="[ + exceptionClass, + { 'is-page-empty': pageEmpty, 'is-component-page': componentPage } + ]" + >
6-6: Confirmstate.urlTypetruthiness for all supported types.If
state.urlTypeis false, no icon renders. Ensure default behavior sets it so PC icons display.examples/sites/demos/apis/exception.js (1)
86-96: Docs slot rename check.Slot is now named “icon”. Ensure this matches component implementation (pc/mobile) and migration notes cover the rename from default→icon if previously documented differently.
discreted66
force-pushed
the
lk-09232
branch
4 times, most recently
from
a1bb91f to
c964c5b
Compare
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
examples/sites/demos/apis/exception.js (2)
28-31: Polish English description for exception-class.Use clearer wording.
Apply this diff:
- 'en-US': 'Setting Custom Classes' + 'en-US': 'Set custom class name'
52-55: Improve English for sub-message.More natural phrasing.
Apply this diff:
- 'en-US': 'Set Level-2 Title' + 'en-US': 'Set subtitle'
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (9)
packages/theme/src/svgs/no-data.svgis excluded by!**/*.svgpackages/theme/src/svgs/no-news.svgis excluded by!**/*.svgpackages/theme/src/svgs/no-perm.svgis excluded by!**/*.svgpackages/theme/src/svgs/no-result.svgis excluded by!**/*.svgpackages/theme/src/svgs/page-noperm.svgis excluded by!**/*.svgpackages/theme/src/svgs/page-nothing.svgis excluded by!**/*.svgpackages/theme/src/svgs/page-servererror.svgis excluded by!**/*.svgpackages/theme/src/svgs/page-weaknet.svgis excluded by!**/*.svgpackages/theme/src/svgs/weaknet.svgis excluded by!**/*.svg
📒 Files selected for processing (29)
examples/sites/demos/apis/exception.js(5 hunks)examples/sites/demos/mobile-first/app/exception/webdoc/exception.js(1 hunks)examples/sites/demos/pc/app/exception/basic-usage-composition-api.vue(1 hunks)examples/sites/demos/pc/app/exception/basic-usage.vue(1 hunks)examples/sites/demos/pc/app/exception/button-text-composition-api.vue(1 hunks)examples/sites/demos/pc/app/exception/button-text.vue(1 hunks)examples/sites/demos/pc/app/exception/component-page-composition-api.vue(1 hunks)examples/sites/demos/pc/app/exception/component-page.vue(1 hunks)examples/sites/demos/pc/app/exception/page-empty-composition-api.vue(1 hunks)examples/sites/demos/pc/app/exception/page-empty.vue(1 hunks)examples/sites/demos/pc/app/exception/slot-composition-api.vue(1 hunks)examples/sites/demos/pc/app/exception/slot.vue(1 hunks)examples/sites/demos/pc/app/exception/sub-message-composition-api.vue(1 hunks)examples/sites/demos/pc/app/exception/sub-message.vue(1 hunks)examples/sites/demos/pc/app/exception/webdoc/exception.cn.md(1 hunks)examples/sites/demos/pc/app/exception/webdoc/exception.en.md(1 hunks)examples/sites/demos/pc/app/exception/webdoc/exception.js(1 hunks)examples/sites/demos/pc/menus.js(1 hunks)packages/theme/src/dark-theme-index.less(1 hunks)packages/theme/src/exception/index.less(1 hunks)packages/theme/src/exception/vars.less(1 hunks)packages/theme/src/index.less(1 hunks)packages/vue-locale/src/lang/en.ts(1 hunks)packages/vue-locale/src/lang/es-LA.ts(1 hunks)packages/vue-locale/src/lang/pt-BR.ts(1 hunks)packages/vue-locale/src/lang/zh-CN.ts(1 hunks)packages/vue/src/exception/index.ts(1 hunks)packages/vue/src/exception/src/index.ts(1 hunks)packages/vue/src/exception/src/pc.vue(1 hunks)
✅ Files skipped from review due to trivial changes (1)
- packages/theme/src/dark-theme-index.less
🚧 Files skipped from review as they are similar to previous changes (26)
- packages/theme/src/index.less
- packages/vue/src/exception/src/index.ts
- examples/sites/demos/pc/app/exception/webdoc/exception.cn.md
- examples/sites/demos/pc/app/exception/sub-message.vue
- packages/vue-locale/src/lang/pt-BR.ts
- examples/sites/demos/pc/app/exception/button-text-composition-api.vue
- examples/sites/demos/pc/app/exception/sub-message-composition-api.vue
- packages/theme/src/exception/vars.less
- packages/vue-locale/src/lang/zh-CN.ts
- examples/sites/demos/pc/app/exception/page-empty.vue
- examples/sites/demos/mobile-first/app/exception/webdoc/exception.js
- examples/sites/demos/pc/app/exception/slot-composition-api.vue
- packages/vue/src/exception/src/pc.vue
- examples/sites/demos/pc/app/exception/component-page.vue
- examples/sites/demos/pc/app/exception/webdoc/exception.en.md
- examples/sites/demos/pc/app/exception/button-text.vue
- packages/theme/src/exception/index.less
- examples/sites/demos/pc/app/exception/webdoc/exception.js
- examples/sites/demos/pc/app/exception/basic-usage-composition-api.vue
- packages/vue/src/exception/index.ts
- examples/sites/demos/pc/app/exception/basic-usage.vue
- examples/sites/demos/pc/app/exception/component-page-composition-api.vue
- examples/sites/demos/pc/app/exception/slot.vue
- packages/vue-locale/src/lang/en.ts
- examples/sites/demos/pc/app/exception/page-empty-composition-api.vue
- packages/vue-locale/src/lang/es-LA.ts
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: PR E2E Test (pnpm test:e2e3)
🔇 Additional comments (8)
examples/sites/demos/pc/menus.js (1)
286-293: Exception menu entry added with version tag — looks good.Addresses the earlier request to include the provided version. Placement and meta format are consistent with existing items.
examples/sites/demos/apis/exception.js (7)
2-2: PC docs mode enabled — LGTM.Mode now covers both pc and mobile-first.
13-19: Component-level exception prop — LGTM.Descriptions and per-mode demos are aligned.
37-43: Page-level exception prop — LGTM.Docs and demo mapping look consistent.
79-84: Content slot description fixed — LGTM.Matches earlier suggestion; demos mapped for both modes.
58-68: Fix English description and punctuation for default type.“Nodata” text should be quoted and punctuation adjusted.
Apply this diff:
- 'en-US': '<p>Set exception type, The default value is nodata</p>' + 'en-US': '<p>Set exception type. The default value is "nodata".</p>'
100-107: IType parity confirmed — LGTM. All union literals (noperm, nodata, weaknet, noresult, nonews, pagenoperm, pageweaknet, pagenothing, pageservererror) appear in the exception component, locale entries and theme/icon svgs.
86-96: OK to rename — component and demos use a namediconslot.packages/vue/src/exception/src/{pc.vue,mobile-first.vue} declare ; demos use <template #icon> (examples/sites/demos/pc/app/exception/slot.vue, slot-composition-api.vue); API docs updated (examples/sites/demos/apis/exception.js).
2 participants
PR
feat:添加缺省页pc模板、文档示例以及暗色模式支持
PR Checklist
Please check if your PR fulfills the following requirements:
PR Type
What kind of change does this PR introduce?
What is the current behavior?
Issue Number: N/A
What is the new behavior?
Does this PR introduce a breaking change?
Other information
Summary by CodeRabbit
New Features
Documentation
Style
Localization
Bug Fixes