普通视图

发现新文章,点击刷新页面。
今天 — 2025年12月15日首页

上汽集团全资子公司、国泰海通全资子公司等新设股权投资合伙企业

2025年12月15日 14:29
36氪获悉,爱企查App显示,近日,宁波甬元隽昇股权投资合伙企业(有限合伙)成立,出资额10.9亿元人民币,经营范围包括以私募基金从事股权投资、投资管理、资产管理等活动。合伙人信息显示,该企业由上汽集团全资子公司上海汽车集团金控管理有限公司、国泰海通全资子公司国泰君安证裕投资有限公司等共同出资。

HashKey据悉将香港IPO价格定在接近区间上限 筹集资金16亿港元

2025年12月15日 14:28
据报道,香港最大的持牌加密货币交易所运营商HashKey Holdings Ltd.将IPO价格定在接近推介区间上限,筹集资金16亿港元(2.06亿美元)。该公司以每股6.68港元的价格发售2.406亿股股票;指导区间为每股5.95港元至6.95港元。HashKey未行使超额配股权。(财联社)

蚂蚁集团AQ升级为“蚂蚁阿福”,App月活超1500万

2025年12月15日 14:26
36氪获悉,12月15日,蚂蚁集团宣布旗下AI健康应用AQ品牌升级为“蚂蚁阿福”,并发布App新版本,升级健康陪伴、健康问答、健康服务三大功能。目前,“蚂蚁阿福”App的月活用户已超1500万,跻身国内AI App前五,成为第一大健康管理AI App。据了解,目前阿福APP每天回答用户500多万个健康提问,55%用户来自三线及以下城市。

日本央行据悉最早将于1月开始减持ETF

2025年12月15日 14:25
知情人士称,日本央行官员最早可能于下月开始出售央行持有的大量交易所交易基金(ETF),这一过程预计要耗时数十年才能完成。知情人士透露,央行将按照9月政策委员会会议的决定,逐步减持这些资产以免引发市场动荡。央行数据显示,截至9月底,相关持仓的市值达83万亿日元(5340亿美元),账面价值37.1万亿日元。(新浪财经)

美团骑手社保补贴到账,全国开设600多处咨询服务窗口现场答疑

2025年12月15日 14:22
36氪获悉,近日,在各地人社局及相关部门指导下,美团已在北京、上海、南京、锦州、宁波、杭州、湘潭等数十城的骑手之家和站点内,开设600多处骑手社保咨询服务窗口,为骑手详细讲解社保缴纳流程、平台补贴比例等问题。美团相关负责人表示,符合要求的骑手只要缴纳养老保险,最快次月首周即可收到平台补贴。美团相关负责人还表示,预计五年总投入100亿元,构建更全面的“基础保障+进阶保障+生活福利”的骑手福利保障模式。

商汤科技日日新Seko系列模型与寒武纪完成适配

2025年12月15日 14:12
36氪获悉,12月15日,商汤科技正式发布Seko2.0——行业首个多剧集生成智能体。其背后依托的是商汤自研的日日新Seko系列模型。商汤日日新Seko系列模型已完成对国产AI芯片寒武纪的适配,国产算力对AIGC核心场景的支持实现了从语言到多模态的关键跨越。适配完成后,商汤科技与寒武纪还将在多个方向共同进一步展开深度优化。

最高奖补5000万元,重庆拟出台15条“政策干货”发展未来产业

2025年12月15日 14:09
36氪获悉,重庆市经济信息委印发《重庆市支持未来产业培育发展若干措施(征求意见稿)》征求社会意见。《措施》称,将从平台建设、人才引育、资金奖补等方面出台15条“政策干货”发展未来产业,奖补资金最高5000万元。按照规划,当前我市正在推动发展“6+3”未来产业,包括空天信息、生物制造、前沿新材料、氢能核能及新型储能、人工智能、低空经济6个高成长未来产业,以及脑机接口及脑科学、光子与量子技术、沉浸技术3个高潜力未来产业。

韩国航企表示“零容忍”乱动机舱安全门行径

2025年12月15日 14:07
韩国大韩航空公司15日说,近年乘客“乱动”机舱安全门的事件增多,威胁航空安全。该公司将对这类行径采取“零容忍”政策,包括对肇事乘客提起刑事诉讼。据悉,大韩航空公司在过去两年间遭遇了14次乘客“乱动”或“试图乱动”机舱安全门的事件,因此公司方面决定今后对这类行径采取“零容忍”政策,以更好地维护航空安全。(央视新闻)

小鹏汽车与EPMB签署车辆组装协议

2025年12月15日 14:00
12月15日,马来西亚汽车零部件制造商EPMB公告称,全资子公司与小鹏汽车已于12月12日签署协议,将在马来西亚共同开展特定车辆项目的研发、制造、生产及组装合作,子公司将为小鹏汽车组装G6车型及X9车型(含X9车型的增程电动汽车版本),G6车型计划于2026年3月31日前投产,X9车型计划于2026年5月25日前投产。(界面)

英国房价因税收政策不确定性下跌

2025年12月15日 13:57
房地产网站Rightmove表示,受政府税收计划不确定性的拖累,12月份英国房屋挂牌价环比下跌1.8%。据该在线房地产平台称,此次下跌使挂牌价降至358128英镑(约合479425美元),导致年底挂牌价较2024年12月下跌0.6%。(新浪财经)

港交所余学勤:港交所预计很快启动每手买卖单位改革的市场咨询

2025年12月15日 13:50
当前港股市场的每手买卖单位还是太多,令人眼花缭乱。对此,港交所市场主管余学勤表示,港交所预计很快启动每手买卖单位改革的市场咨询:“每手买卖单位的改革是非常重要的,当前港股市场的手数单位比较复杂,有40多个不同的单位。”在时间表上,余学勤表示,在年底前会跟市场进行咨询,在2026年一季度收到一些回应后,后续将再进一步推动这一改革。(新浪财经)

flex 0 flex 1 flex none flex auto 应该在什么场景下使用

作者 喵爱吃鱼
2025年12月15日 13:49

1. flex: 0 (等价于 flex: 0 1 0%)

.item {
  flex-grow: 0;      /* 不扩展 */
  flex-shrink: 1;    /* 可以收缩 */
  flex-basis: 0%;    /* 基础尺寸为 0 */
}

2. flex: 1 (等价于 flex: 1 1 0%)

.item {
  flex-grow: 1;      /* 扩展填满剩余空间 */
  flex-shrink: 1;    /* 可以收缩 */
  flex-basis: 0%;    /* 基础尺寸为 0,完全由 grow 决定 */
}

3. flex: none (等价于 flex: 0 0 auto)

.item {
  flex-grow: 0;      /* 不扩展 */
  flex-shrink: 0;    /* 不收缩 */
  flex-basis: auto;  /* 基于内容的固有尺寸 */
}

4. flex: auto (等价于 flex: 1 1 auto)

.item {
  flex-grow: 1;      /* 扩展填满剩余空间 */
  flex-shrink: 1;    /* 可以收缩 */
  flex-basis: auto;  /* 基于内容的固有尺寸 */
}

选择指南

属性 何时使用 典型场景
flex: 0 元素有固定尺寸,不占额外空间 按钮、图标、固定宽度组件
flex: 1 需要占满剩余空间 主内容区、等分布局
flex: none 保持原始尺寸,不被压缩 Logo、重要按钮、图片
flex: auto 内容驱动的弹性布局 标签页、表单控件、响应式组件

记忆技巧:

  • flex: 0 - "我不要额外空间"
  • flex: 1 - "给我所有剩余空间"
  • flex: none - "保持我的原样"
  • flex: auto - "我很灵活,看情况调整"

flex: 0 vs flex: none 的核心区别

关键差异:flex-shrink(收缩能力)

/* flex: 0 */
flex-grow: 0;      /* 不扩展 ✓ 相同 */
flex-shrink: 1;    /* 可以收缩 ⚠️ 关键区别 */
flex-basis: 0%;    /* 基础尺寸为 0 */

/* flex: none */
flex-grow: 0;      /* 不扩展 ✓ 相同 */
flex-shrink: 0;    /* 不能收缩 ⚠️ 关键区别 */
flex-basis: auto;  /* 基于内容尺寸 */

记忆技巧

决策流程图

需要固定尺寸的元素?
    ↓ 是
容器空间不足时,这个元素可以被压缩吗?
    ↓ 可以                    ↓ 不可以
  flex: 0                  flex: none
(适应性固定)              (刚性固定)

简单记忆法

  • flex: 0 = "我是固定的,但可以妥协"(可收缩)
  • flex: none = "我是固定的,绝不妥协"(不收缩)

实际应用

当你不确定用哪个时,问自己:

  1. 如果容器空间不够,这个元素可以被压缩吗?
  2. 这个元素的尺寸是否绝对不能改变?

如果答案是"可以压缩" → 用 flex: 0

如果答案是"绝不能变" → 用 flex: none

flex: 1 vs flex: auto 的核心区别

关键差异:flex-basis(初始尺寸计算)

/* flex: 1 */
flex-grow: 1;      /* 扩展 ✓ 相同 */
flex-shrink: 1;    /* 收缩 ✓ 相同 */
flex-basis: 0%;    /* 忽略内容尺寸 ⚠️ 关键区别 */

/* flex: auto */
flex-grow: 1;      /* 扩展 ✓ 相同 */
flex-shrink: 1;    /* 收缩 ✓ 相同 */
flex-basis: auto;  /* 基于内容尺寸 ⚠️ 关键区别 */

实际效果对比

场景1:不同长度的内容

// 容器宽度:600px
<Flex style={{width: '600px', border: '1px solid red'}}>
  <div style={{flex: 1, background: 'lightblue', textAlign: 'center'}}>
    短
  </div>
  <div style={{flex: 1, background: 'lightgreen', textAlign: 'center'}}>
    这是一段比较长的文本内容
  </div>
  <div style={{flex: 1, background: 'lightyellow', textAlign: 'center'}}>
    中等长度
  </div>
</Flex>

flex: 1 的结果:

  • 每个元素都是 200px 宽(600px ÷ 3)
  • 完全忽略内容长度,强制等分
<Flex style={{width: '600px', border: '1px solid red'}}>
  <div style={{flex: 'auto', background: 'lightblue', textAlign: 'center'}}>
    短
  </div>
  <div style={{flex: 'auto', background: 'lightgreen', textAlign: 'center'}}>
    这是一段比较长的文本内容
  </div>
  <div style={{flex: 'auto', background: 'lightyellow', textAlign: 'center'}}>
    中等长度
  </div>
</Flex>

flex: auto 的结果:

  • 长文本元素:约 280px(基础尺寸更大)
  • 短文本元素:约 120px(基础尺寸更小)
  • 中等文本元素:约 200px
  • 先考虑内容尺寸,再分配剩余空间

场景2:混合内容类型

<Flex style={{width: '500px'}} gap={16}>
  {/* 按钮 */}
  <Button style={{flex: 1}}>确定</Button>
  <Button style={{flex: 1}}>取消</Button>
  <Button style={{flex: 1}}>重置数据</Button>
</Flex>

flex: 1 的效果:

  • 三个按钮完全等宽
  • "重置数据"按钮内的文字可能显得很松散
<Flex style={{width: '500px'}} gap={16}>
  {/* 按钮 */}
  <Button style={{flex: 'auto'}}>确定</Button>
  <Button style={{flex: 'auto'}}>取消</Button>
  <Button style={{flex: 'auto'}}>重置数据</Button>
</Flex>

flex: auto 的效果:

  • "重置数据"按钮会稍微宽一些(因为文字更长)
  • 每个按钮的宽度更符合内容需求

记忆技巧

核心原则:需要视觉统一用 flex: 1,需要内容自然用 flex: auto

决策流程

需要元素填满剩余空间?
    ↓ 是
希望所有元素完全等分吗?
    ↓ 是                    ↓ 否
  flex: 1                 flex: auto
(强制等分)              (内容驱动)

简单记忆法

  • flex: 1 = "我要平均分配,不管内容多少"(忽略内容)
  • flex: auto = "我要分配空间,但要考虑我的内容"(考虑内容)

视觉比喻

想象分蛋糕:

  • flex: 1:不管谁的胃口大小,每人分到完全相同的一块
  • flex: auto:先看每人的基本需求,然后把剩余的平分

在实际开发中,90% 的"占满剩余空间"需求都用 flex: 1的原因

  • 避免了内容的干扰

  • 在不同屏幕尺寸下表现一致

  • flex: 1 计算更高效:

    • 跳过内容尺寸计算步骤
    • 减少重排(reflow)的可能性
    • 在复杂布局中性能更好
/* flex: 1 的计算 */
flex-basis: 0%;  /* 跳过内容尺寸计算 */
/* 直接计算:剩余空间 ÷ flex-grow 总和 */

/* flex: auto 的计算 */
flex-basis: auto;  /* 需要先计算内容尺寸 */
/* 然后计算:(剩余空间 - 内容尺寸) ÷ flex-grow 总和 + 内容尺寸 */

前端字符串排序搜索可以更加细化了

作者 CC码码
2025年12月15日 13:42

大家好,我是CC,在这里欢迎大家的到来~

开场

书接上文,Intl 下的 Segmenter 对象可以实现对文本的分割,除此之外,还有对字符串比较、数字格式化、日期格式化等其他功能。

这篇文章先来看看字符串比较,现在来理论加实践一下。

字符串比较

Intl.Collator用于语言敏感的字符串比较。

比较

基于 Collator 对象的排序规则进行比较。第一个字符串出现在第二个字符串之前则为负值,否则为正则,相等时则返回 0。

console.log(new Intl.Collator().compare("a", "c")); // -1
console.log(new Intl.Collator().compare("c", "a")); // 1
console.log(new Intl.Collator().compare("a", "a")); // 0

基于语言比较

// 德语中,ä 使用 a 的排序
console.log(new Intl.Collator("de").compare("ä", "z"));
// -1

// 在瑞典语中,ä 排在 z 之后
console.log(new Intl.Collator("sv").compare("ä", "z"));
// 1

配置项

  • localeMatcher
    • 使用的区域匹配算法,可选的值包括:
    • 默认值为best fit-使用浏览器最佳匹配算法,还有lookup-使用 BCP 47 规范的标准查找
const testStrings = ['苹果', '香蕉', '橙子'];

// lookup:使用 BCP 47 规范的标准查找
const lookupCollator = new Intl.Collator('zh', {
  localeMatcher: 'lookup'
});

// best fit:使用浏览器的最佳匹配算法(默认)
const bestFitCollator = new Intl.Collator('zh', {
  localeMatcher: 'best fit'
});

console.log(testStrings.sort(lookupCollator.compare));
console.log(testStrings.sort(bestFitCollator.compare));

// ["橙子","苹果","香蕉"]
// ["橙子","苹果","香蕉"]
  • usage
    • 是用于排序还是用于搜索匹配的字符串,可选的值包括:
    • 默认值是 sort,还有 search
const words = ['数据', '数据库', '数学', '数字', '数值'];

// 用于排序的 Collator
const sortCollator = new Intl.Collator('zh-CN', {
  usage: 'sort',
  sensitivity: 'variant'
});

// 用于搜索的 Collator
const searchCollator = new Intl.Collator('zh-CN', {
  usage: 'search',
  sensitivity: 'base'  // 搜索时更宽松
});

console.log('排序结果:', words.sort(sortCollator.compare));
// ["数据", "数据库", "数值", "数字", "数学"]

const searchTerm = '数';
const searchResults = words.filter(word => 
  searchCollator.compare(word.slice(0, searchTerm.length), searchTerm) === 0
);
console.log(`搜索"${searchTerm}"的结果:`, searchResults);
// ["数据", "数据库", "数学", "数字", "数值"]
  • sensitivity
    • 字符串中哪些差异应导致结果值为非零,可能的值包括:
    • base: 只有字母不同的字符串比较时不相等,像 a ≠ b、a = á、a = A。
    • accent: 只有不同的基本字母或重音符号和其他变音符号的字符串比较时不相等,例如:a ≠ b、a ≠ á、a = A。
    • case: 只有不同的基本字母或大小写的字符串比较时不相等,例如:a ≠ b、a = á、a ≠ A。
    • variant: 字符串的字母、重音和其他变音富豪,或不同大小写比较不相等,例如:a ≠ b、a ≠ á、a ≠ A。
    • usage 是 sort 时默认值是 variant,search 时默认值取决于区域。
const pinyinExamples = [
  ['mā', 'ma'],     // 声调差异
  ['lǜ', 'lu'],     // 特殊字符差异
  ['zhōng', 'zhong'] // 音调符号差异
];

const pinyinAccentCollator = new Intl.Collator('zh-CN', {
  sensitivity: 'accent',  // 忽略声调差异
  usage: 'search'
});

pinyinExamples.forEach(([a, b]) => {
  const result = pinyinAccentCollator.compare(a, b);
  console.log(`"${a}" vs "${b}": ${result === 0 ? '匹配' : '不匹配'}`);
});
// "mā" vs "ma": 不匹配
// "lǜ" vs "lu": 不匹配
// "zhōng" vs "zhong": 不匹配

const pinyinBaseCollator = new Intl.Collator('zh-CN', {
  sensitivity: 'base',  // 忽略声调差异
  usage: 'search'
});
pinyinExamples.forEach(([a, b]) => {
  const result = pinyinBaseCollator.compare(a, b);
  console.log(`"${a}" vs "${b}": ${result === 0 ? '匹配' : '不匹配'}`);
});
// "mā" vs "ma": 匹配
// "lǜ" vs "lu": 匹配
// "zhōng" vs "zhong": 匹配

const pinyinCaseCollator = new Intl.Collator('zh-CN', {
  sensitivity: 'case',  // 忽略声调差异
  usage: 'search'
});
pinyinExamples.forEach(([a, b]) => {
  const result = pinyinCaseCollator.compare(a, b);
  console.log(`"${a}" vs "${b}": ${result === 0 ? '匹配' : '不匹配'}`);
});
// "mā" vs "ma": 匹配
// "lǜ" vs "lu": 匹配
// "zhōng" vs "zhong": 匹配

const pinyinVariantCollator = new Intl.Collator('zh-CN', {
  sensitivity: 'variant',  // 忽略声调差异
  usage: 'search'
});
pinyinExamples.forEach(([a, b]) => {
  const result = pinyinVariantCollator.compare(a, b);
  console.log(`"${a}" vs "${b}": ${result === 0 ? '匹配' : '不匹配'}`);
});
// "mā" vs "ma": 不匹配
// "lǜ" vs "lu": 不匹配
// "zhōng" vs "zhong": 不匹配
  • ignorePunctuation
    • 是否忽略标点
    • 默认是 false
const texts = [
  '你好,世界!',
  '你好世界',
  '你好-世界',
  '你好。世界',
  '你好——世界'
];

const withPunctuation = new Intl.Collator('zh-CN', {
  ignorePunctuation: false  // 不忽略标点(默认)
});
const withoutPunctuation = new Intl.Collator('zh-CN', {
  ignorePunctuation: true   // 忽略标点
});

console.log(texts.sort(withPunctuation.compare));
console.log(texts.sort(withoutPunctuation.compare));
// [
//     "你好-世界",
//     "你好——世界",
//     "你好,世界!",
//     "你好。世界",
//     "你好世界"
// ]
// [
//     "你好,世界!",
//     "你好世界",
//     "你好-世界",
//     "你好。世界",
//     "你好——世界"
// ]
  • numeric
    • 是否使用数字对照,使得“1”<“2”<“10”
    • 默认是 false
    • 同 locales 的 Unicode 扩展键 kn 设置,但优先级高于他
const items = [
  '第1章 引言',
  '第10章 总结',
  '第2章 正文',
  '第11章 附录',
  '第20章 参考文献'
];
// 普通排序(字符串方式)
const regularCollator = new Intl.Collator('zh-CN', {
  numeric: false  // 默认
});

// 数字感知排序
const numericCollator = new Intl.Collator('zh-CN', {
  numeric: true
});

console.log(items.slice().sort(regularCollator.compare));
console.log(items.slice().sort(numericCollator.compare));
// [
//     "第10章 总结",
//     "第11章 附录",
//     "第1章 引言",
//     "第20章 参考文献",
//     "第2章 正文"
// ]
// [
//     "第1章 引言",
//     "第2章 正文",
//     "第10章 总结",
//     "第11章 附录",
//     "第20章 参考文献"
// ]
  • caseFirst
    • 是否首先根据大小写排序,可选的值包括:
    • upper
    • lower
    • false
    • 同 locales 的 Unicode 扩展键 kf 设置,但优先级高于他
const mixedList = [
  'Apple',
  'apple',
  'Banana',
  'banana',
  '中文',
  'China',
  'china',
  '苹果'
];
// 大写优先
const upperFirst = new Intl.Collator('zh-CN', {
  caseFirst: 'upper',
  sensitivity: 'case'  // 需要区分大小写
});

console.log(mixedList.slice().sort(upperFirst.compare));
// ["Apple", "Banana", "China", "apple", "banana", "china", "中文", "苹果"]
// [
//     "苹果",
//     "中文",
//     "Apple",
//     "apple",
//     "Banana",
//     "banana",
//     "China",
//     "china"
// ]

// 小写优先
const lowerFirst = new Intl.Collator('zh-CN', {
  caseFirst: 'lower',
  sensitivity: 'case'
});

console.log(mixedList.slice().sort(lowerFirst.compare));
// ["apple", "banana", "china", "Apple", "Banana", "China", "中文", "苹果"]
// [
//     "苹果",
//     "中文",
//     "apple",
//     "Apple",
//     "banana",
//     "Banana",
//     "china",
//     "China"
// ]

// 不优先(默认)
const noCaseFirst = new Intl.Collator('zh-CN', {
  caseFirst: false,
  sensitivity: 'case'
});

console.log(mixedList.slice().sort(noCaseFirst.compare));
// [
//     "苹果",
//     "中文",
//     "apple",
//     "Apple",
//     "banana",
//     "Banana",
//     "china",
//     "China"
// ]
  • collation
    • 区域的变体
    • 同 locales 的 Unicode 扩展键 co 设置,但优先级高于他
const words = ['张三', '李四', '王五', '赵六', '孙七'];

// 默认拼音排序
const defaultCollator = new Intl.Collator('zh-CN');
console.log(words.slice().sort(defaultCollator.compare));

// 尝试不同的 collation(如果支持)
try {
  // 笔画排序(如果支持)
  const strokeCollator = new Intl.Collator('zh-CN-u-co-stroke');
  console.log(words.slice().sort(strokeCollator.compare));
} catch (e) {
  console.log('\n笔画排序不支持:', e.message);
}

// 通过 Unicode 扩展键设置 collation
const localeWithCollation = 'zh-CN-u-co-pinyin'; // 拼音排序(默认)
const collator1 = new Intl.Collator(localeWithCollation);
console.log('\n通过 Unicode 扩展键设置 (拼音):', collator1.resolvedOptions().collation);

// 通过 options 参数覆盖
const collator2 = new Intl.Collator('zh-CN-u-co-stroke', {
  collation: 'pinyin'  // options 优先级更高
});
console.log('Options 覆盖 Unicode 扩展键:', collator2.resolvedOptions().collation);

获取配置项

const options = collator.resolvedOptions();

usedOptions.locale; // "de"
usedOptions.usage; // "sort"
usedOptions.sensitivity; // "base"
usedOptions.ignorePunctuation; // false
usedOptions.collation; // "default"
usedOptions.numeric; // false

判断返回支持的 locale

在给定的 locales 数组中判断出 Collator支持的 locales。但是可能每个浏览器支持的不大一样。

const locales = ["ban", "id-u-co-pinyin", "de-ID"];
const options = { localeMatcher: "lookup" };
console.log(Intl.Collator.supportedLocalesOf(locales, options));
// ["id-u-co-pinyin", "de-ID"]

总结

Intl.Collator可以根据当前环境或者手动设置的 Locale 以及字符串的大小写、音标、声调、标点符号和数字敏感度来实现字符串的排序和搜索;在构建国际化应用中,特别是在处理用户生成内容、搜索排序、数据展示等场景中,能确保应用遵循目标语言的正确规则。

泰国财长:资本流入导致泰铢过强

2025年12月15日 13:40
泰国财长埃克尼提(Ekniti Nitithanprapas)周一告诉记者,受资本流入的推动,泰铢汇率过强。他还表示,财政部一直在与央行讨论如何应对货币强势问题。(新浪财经)

前11个月访港旅客累计约4500万人次,已超去年全年总数

2025年12月15日 13:36
香港旅发局15日表示,今年1至11月共录得约4500万访港旅客人次,按年增加12%,已超越2024年全年访港旅客量的总数。前11个月访港中国内地旅客占约3450万人次,按年增11%。非中国内地旅客录得约1000万人次,按年增16%,其中短途及长途市场均录得接近两成增长。(央视新闻)
❌
❌