feat(dropdown): support default value display

components/dropdown/dropdown.tsx

@@ -96,22 +96,42 @@ export default defineComponent({
             </Scrollbar>
         );
 
-        return () => (
-            <Popper
-                v-model={visible.value}
-                trigger={props.trigger}
-                placement={props.placement}
-                popperClass={[`${prefixCls}-popper`, props.popperClass]}
-                appendToContainer={props.appendToContainer}
-                getContainer={props.getContainer}
-                offset={props.offset}
-                disabled={props.disabled}
-                arrow={props.arrow}
-                v-slots={{
-                    default: renderOptions,
-                    trigger: slots.default,
-                }}
-            />
-        );
+        return () => {
+            const selectedOption = props.options.find(
+                (option) => option[props.valueField] === currentValue.value,
+            );
+            const selectedLabel = selectedOption
+                ? selectedOption[props.labelField]
+                : undefined;
+            const slotContent = slots.default?.({
+                selectedLabel:
+                    typeof selectedLabel === 'function'
+                        ? selectedLabel(selectedOption)
+                        : selectedLabel,
+                selectedValue: currentValue.value,
+            });
+            return (
+                <Popper
+                    v-model={visible.value}
+                    trigger={props.trigger}
+                    placement={props.placement}
+                    popperClass={[
+                        `${prefixCls}-popper`,
+                        props.popperClass,
+                    ]}
+                    appendToContainer={props.appendToContainer}
+                    getContainer={props.getContainer}
+                    offset={props.offset}
+                    disabled={props.disabled}
+                    arrow={props.arrow}
+                    v-slots={{
+                        default: renderOptions,
+                        trigger: slotContent.length
+                            ? () => slotContent
+                            : () => selectedLabel,
+                    }}
+                />
+            );
+        };
     },
 });

components/layout/__tests__/sider-887.spec.ts

@@ -0,0 +1,34 @@
+import { mount } from '@vue/test-utils';
+import { FAside, FFooter, FHeader, FLayout, FMain } from '../index';
+import getPrefixCls from '../../_util/getPrefixCls';
+import fs from 'fs';
+import path from 'path';
+
+const prefixCls = getPrefixCls('layout');
+
+const _mount = (props, slots = {}) =>
+    mount(FLayout, {
+        attachTo: document.body,
+        props,
+        slots,
+    });
+
+describe('Layout Sider #887', () => {
+    test('style file has box-sizing: border-box in aside block', () => {
+        const stylePath = path.resolve(
+            __dirname,
+            '../style/index.less',
+        );
+        const styleContent = fs.readFileSync(stylePath, 'utf-8');
+        const asideBlockMatch = styleContent.match(
+            /\.@{aside-prefix-cls}\s*\{[^}]*box-sizing:\s*border-box[^}]*\}/s,
+        );
+        expect(asideBlockMatch).not.toBeNull();
+        expect(asideBlockMatch[0]).toContain('box-sizing: border-box');
+    });
+
+    test.skip('FSider rendered element has box-sizing: border-box', async () => {
+        // jsdom does not process .less imports, so computed style check
+        // is unreliable. Source-level check above is the authoritative test.
+    });
+});

components/layout/style/index.less

@@ -43,6 +43,7 @@
 .@{aside-prefix-cls} {
     position: relative;
     flex-shrink: 0;
+    box-sizing: border-box;
     color: var(--f-text-color);
     transition: width @animation-duration-base;
     &.is-fixed {