fix(cascader): fix caret rotation origin and add changeOnSelect demo

Arrow span lacked display:inline-flex so rotate(180deg) pivoted
off-center. Add demo for changeOnSelect and displayRender props.

Author: wangdicoder

components/cascader/demo/change-on-select.md

@@ -0,0 +1,61 @@
+<demo>
+
+### Change On Select
+
+By default, only selecting a leaf node triggers `onChange`. Set `changeOnSelect` to fire `onChange` at every level, allowing partial selections. Use `displayRender` to customize how the selected path is shown.
+
+```jsx live
+() => {
+  const options = [
+    {
+      value: 'jiangsu',
+      label: 'Jiangsu',
+      children: [
+        {
+          value: 'nanjing',
+          label: 'Nanjing',
+          children: [
+            { value: 'zhonghuamen', label: 'Zhong Hua Men' },
+          ],
+        },
+      ],
+    },
+    {
+      value: 'zhejiang',
+      label: 'Zhejiang',
+      children: [
+        {
+          value: 'hangzhou',
+          label: 'Hangzhou',
+          children: [
+            { value: 'xihu', label: 'West Lake' },
+          ],
+        },
+      ],
+    },
+  ];
+
+  const [value, setValue] = React.useState([]);
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
+      <Cascader
+        options={options}
+        value={value}
+        onChange={(val) => setValue(val)}
+        changeOnSelect
+        placeholder="Select any level"
+      />
+      <span>Selected: {value.length > 0 ? value.join(' / ') : 'none'}</span>
+      <Cascader
+        options={options}
+        defaultValue={['zhejiang', 'hangzhou', 'xihu']}
+        displayRender={(labels) => labels.join(' > ')}
+        placeholder="Custom separator"
+      />
+    </div>
+  );
+}
+```
+
+</demo>

components/cascader/index.md

@@ -1,4 +1,5 @@
 import Basic from './demo/basic.md'
+import ChangeOnSelect from './demo/change-on-select.md'
 import DefaultValue from './demo/default-value.md'
 import Hover from './demo/hover.md'
 import Disabled from './demo/disabled.md'
@@ -29,6 +30,7 @@ import { Cascader } from 'tiny-ui';
   <column>
     <DefaultValue/>
     <Disabled/>
+    <ChangeOnSelect/>
   </column>
 </layout>
 

components/cascader/style/_index.scss

@@ -84,6 +84,9 @@
     font-size: 12px;
     color: var(--ty-color-text-secondary, #{$gray-400});
     transition: transform 0.2s;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
   }
 
   &_open &__arrow {