feat: 崩溃弹窗集成日志分享与 AI 分析

将崩溃弹窗替换为双栏布局：左侧展示诊断摘要与分享入口，右侧提供日志文件浏览器与 LogAgent 流式分析输出。 - MinecraftCrashModal 改用新版的分享票据、结构化摘要与 AI 事件流 - 新增 minecraft-crash-logs 工具函数，用于筛选与合并崩溃日志 - 事件层新增 logshare_ai_listener 监听 AI 分析进度 - log-share 工具更新为支持 provider 路由的新版 - Button 组件对齐新版（补 icon-only、circular、2xs 与 chip/highlight 变体） - console 导出 LogViewport，供日志浏览器复用 - 补齐 en-US / zh-CN 相关文案
2026-10-11 14:05:33 +08:00
1 parent a95153d0b1
commit c71c220446
@@ -7,6 +7,8 @@ import type { ButtonProps } from './types'
 const props = withDefaults(defineProps<ButtonProps>(), {
 	type: 'base',
 	size: 'md',
+	iconOnly: false,
+	circular: false,
 	nativeType: 'button',
 	disabled: false,
 	loading: false,
@@ -26,8 +28,11 @@ defineExpose({ element })
 		:color="props.color"
 		:size="props.size"
 		:interaction="props.interaction"
+		:icon-only="props.iconOnly"
+		:circular="props.circular"
 		:native-type="props.nativeType"
 		:disabled="props.disabled || props.loading"
+		:aria-label="props.iconOnly ? props.label : undefined"
 		:aria-busy="props.loading || undefined"
 	>
 		<slot />
@@ -13,7 +13,10 @@ import type {
 const baseClasses = [
 	// Base
 	'relative inline-flex min-w-0 shrink-0 items-center justify-center',
-	'whitespace-nowrap border-0 no-underline',
+	// The transparent border is load-bearing, not decorative: it participates in
+	// layout, so an auto-width button is 2px wider than it would be without it.
+	// The ring participates in layout; dropping it would silently narrow every text button.
+	'whitespace-nowrap border border-solid border-transparent no-underline',
 	// Interactions
 	'touch-manipulation cursor-pointer select-none transition-[background-color,color,box-shadow,filter,opacity,transform] duration-150 ease-out',
 	'enabled:active:scale-[0.97]',
@@ -26,6 +29,8 @@ const baseClasses = [
 ].join(' ')

 const sizeClasses: Record<ButtonSize, string> = {
+	'2xs':
+		'h-6 gap-1 rounded-lg px-1.5 text-sm font-semibold leading-5 [&>svg]:size-4 [&>svg]:min-h-4 [&>svg]:min-w-4 [&>svg]:shrink-0',
 	xs: 'h-7 gap-1 rounded-lg px-1.5 text-sm font-semibold leading-5 [&>svg]:size-4 [&>svg]:min-h-4 [&>svg]:min-w-4 [&>svg]:shrink-0',
 	sm: 'h-8 gap-1 rounded-[10px] px-1.5 text-sm font-semibold leading-5 [&>svg]:size-4 [&>svg]:min-h-4 [&>svg]:min-w-4 [&>svg]:shrink-0',
 	md: 'h-9 gap-1.5 rounded-xl px-2.5 text-base font-semibold leading-5 [&>svg]:size-5 [&>svg]:min-h-5 [&>svg]:min-w-5 [&>svg]:shrink-0',
@@ -34,6 +39,7 @@ const sizeClasses: Record<ButtonSize, string> = {
 }

 const iconOnlySizeClasses: Record<ButtonSize, string> = {
+	'2xs': 'min-w-6 w-6 !px-0',
 	xs: 'min-w-7 w-7 !px-0',
 	sm: 'min-w-8 w-8 !px-0',
 	md: 'min-w-9 w-9 !px-0',
@@ -42,14 +48,23 @@ const iconOnlySizeClasses: Record<ButtonSize, string> = {
 }

 const typeClasses: Record<ButtonType, string> = {
-	base: 'button-frame--base bg-surface-4 text-contrast [&>svg]:text-primary',
+	base: 'button-frame--base bg-surface-4 text-[var(--color-text-primary)] [&>svg]:text-[var(--color-text-default)]',
 	colored:
 		'button-frame--colored bg-[--button-color] text-[var(--color-accent-contrast)] [&>svg]:text-inherit',
 	'colored-text':
 		'button-frame--colored-text bg-surface-4 text-[--button-color] [&>svg]:text-inherit',
 	outlined:
-		'button-frame--outlined bg-transparent text-[var(--button-color,var(--color-contrast))] [&>svg]:text-[var(--button-color,var(--color-base))]',
+		'button-frame--outlined bg-transparent text-[var(--button-color,var(--color-text-primary))] [&>svg]:text-[var(--button-color,var(--color-text-default))]',
 	quiet: 'button-frame--quiet bg-transparent [&>svg]:text-inherit',
+	// A 25% tint of the accent colour. All three read the same tint; they differ
+	// in label colour and whether they carry the raised shadow. Without a colour
+	// the tint variable is unset and the fill falls back to the raised surface,
+	// which is what the legacy uncoloured chip rendered as.
+	chip: 'button-frame--chip bg-[--button-highlight,var(--surface-4)] text-[var(--button-color,var(--color-text-default))] [&>svg]:text-inherit',
+	'chip-text':
+		'button-frame--chip-text bg-[--button-highlight,var(--surface-4)] text-[var(--button-color,var(--color-text-default))] [&>svg]:text-inherit',
+	highlight:
+		'button-frame--highlight bg-[--button-highlight,var(--surface-4)] text-[var(--color-text-primary)] [&>svg]:text-inherit',
 }

 const interactionClasses: Record<ButtonInteraction, string> = {
@@ -67,7 +82,17 @@ const colorVariables: Record<ButtonColor, string> = {
 	green: 'var(--color-green)',
 	blue: 'var(--color-blue)',
 	purple: 'var(--color-purple)',
-	medal_promotion: 'var(--medal-promotion-text-orange, var(--color-orange))',
+}
+
+// The 25%-opacity tint behind `chip`/`highlight`. Each accent has its own
+// token, so the tint must be looked up rather than derived.
+const highlightVariables: Record<ButtonColor, string> = {
+	brand: 'var(--color-brand-highlight)',
+	red: 'var(--color-red-highlight)',
+	orange: 'var(--color-orange-highlight)',
+	green: 'var(--color-green-highlight)',
+	blue: 'var(--color-blue-highlight)',
+	purple: 'var(--color-purple-highlight)',
 }

 const props = withDefaults(
@@ -101,7 +126,20 @@ const classes = computed(() => [
 	props.circular ? '!rounded-full' : '',
 ])
 const style = computed((): CSSProperties | undefined => {
+	// `outlined` and `quiet` deliberately publish nothing without an explicit
+	// colour, so their own `var(--button-color, <default>)` fallbacks apply —
+	// that is what reproduces the legacy default ring and text colours.
 	if ((props.type === 'outlined' || props.type === 'quiet') && !props.color) return undefined
+	if (props.type === 'chip' || props.type === 'chip-text' || props.type === 'highlight') {
+		// Without an accent these fall back to the page surface and the default
+		// label, matching the legacy behaviour for an uncoloured chip.
+		const accent = props.color
+		if (!accent) return undefined
+		return {
+			'--button-color': colorVariables[accent],
+			'--button-highlight': highlightVariables[accent],
+		} as CSSProperties
+	}
 	if (
 		props.type !== 'colored' &&
 		props.type !== 'colored-text' &&
@@ -163,11 +201,24 @@ defineExpose({ element })
 	mask-composite: exclude;
 }

+/* The ring is a real border so it participates in layout. Set here rather
+ * than as a utility because it has to beat the transparent border colour in
+ * `baseClasses`. */
 .button-frame--outlined {
-	box-shadow: inset 0 0 0 1px var(--button-color, var(--surface-5));
+	border-color: var(--button-color, var(--surface-5));
 }

 .button-frame--quiet {
-	color: var(--button-color, var(--color-base));
+	color: var(--button-color, var(--color-text-default));
+}
+
+/* `chip` and `highlight` are tinted fills rather than transparent ones, so they
+ * keep the raised-button shadow. `chip-text` is the same tint without it --
+ * the legacy `highlight-colored-text`, which never had a shadow. */
+.button-frame--chip,
+.button-frame--highlight {
+	box-shadow:
+		inset 0 0 0 1px var(--surface-5),
+		0 1px 1px rgba(0, 0, 0, 0.12);
 }
 </style>
@@ -1,56 +1,74 @@
-export type ButtonType = 'base' | 'colored' | 'colored-text' | 'outlined' | 'quiet'
+export type ButtonType =
+	'base' | 'colored' | 'colored-text' | 'outlined' | 'quiet' | 'chip' | 'chip-text' | 'highlight'

-export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+export type ButtonSize = '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'

 export type ButtonInteraction = 'surface' | 'filled' | 'none'

 // TODO: Standardized color string enum props across @modrinth/ui
-export type ButtonColor =
-	| 'brand'
-	| 'red'
-	| 'orange'
-	| 'green'
-	| 'blue'
-	| 'purple'
-	| 'medal_promotion'
+export type ButtonColor = 'brand' | 'red' | 'orange' | 'green' | 'blue' | 'purple'

-export type ButtonVisualProps = {
+type ButtonVisualBase = {
 	size?: ButtonSize
-	interaction?: ButtonInteraction
-} & (
+}
+
+type ButtonVisualWithoutInteraction =
 	| {
 			type?: 'base'
 			color?: never
+			interaction?: never
 	  }
 	| {
-			type: 'outlined'
+			type: Exclude<ButtonType, 'base' | 'quiet'>
 			color?: ButtonColor
+			interaction?: never
 	  }
-	| {
-			type: 'colored'
-			color?: ButtonColor
-	  }
-	| {
-			type: 'colored-text'
-			color?: ButtonColor
-	  }
-	| {
-			type: 'quiet'
-			color?: ButtonColor
-	  }
-)
+
+/**
+ * Public visual combinations supported by the current button frame.
+ *
+ * `interaction` only changes quiet buttons, so exposing it on any other type
+ * would accept a prop that has no effect. Keeping that restriction here makes
+ * Button and ButtonLink share one truthful visual contract.
+ */
+export type ButtonVisualProps = ButtonVisualBase &
+	(
+		| ButtonVisualWithoutInteraction
+		| {
+				type: 'quiet'
+				color?: ButtonColor
+				interaction?: ButtonInteraction
+		  }
+	)

 export type ButtonNativeType = 'button' | 'submit' | 'reset'

-export interface ButtonProps {
-	type?: ButtonType
-	color?: ButtonColor
-	size?: ButtonSize
-	interaction?: ButtonInteraction
-	nativeType?: ButtonNativeType
-	disabled?: boolean
-	loading?: boolean
-}
+/** Icon-only controls need a name because their slot has no visible label. */
+export type ButtonContentProps =
+	| {
+			iconOnly: true
+			label: string
+	  }
+	| {
+			iconOnly?: false
+			label?: never
+	  }
+
+export type ButtonProps = ButtonVisualProps &
+	ButtonContentProps & {
+		circular?: boolean
+		nativeType?: ButtonNativeType
+		disabled?: boolean
+		loading?: boolean
+	}
+
+export type ButtonLinkProps = ButtonVisualProps &
+	ButtonContentProps & {
+		as?: string | import('vue').Component
+		href?: string
+		disabled?: boolean
+		circular?: boolean
+	}

 export interface ButtonElementHandle {
 	element: HTMLElement | null
@@ -1,5 +1,6 @@
 export { default as JLineCommandInput } from './components/JLineCommandInput.vue'
+export { default as LogViewport } from './components/LogViewport.vue'
 export * from './jline'
 export { default as ConsolePageLayout } from './layout.vue'
 export * from './providers'
-export * from './types'
+export * from './types'
@@ -28,6 +28,13 @@ export function truncateLogToMaxBytes(content: string, maxBytes: number): string
 	return textDecoder.decode(bytes.subarray(start))
 }

+/**
+ * Log sharing providers supported by the launcher. LogShare is the default
+ * and is implemented in the desktop app through native Tauri commands; mclo.gs
+ * is the network fallback used when LogShare is unreachable or unselected.
+ */
+export type LogShareProvider = 'logshare' | 'mclogs'
+
 /**
 * Result of sharing log content. `truncated` is set when the content exceeded
 * `LOG_SHARE_MAX_BYTES` and only its tail was uploaded.
@@ -39,12 +46,25 @@ export type LogShareResult = {

 /**
 * Share log content through mclo.gs. Content larger than `LOG_SHARE_MAX_BYTES`
- * is trimmed to its last
- * `LOG_SHARE_MAX_BYTES` before uploading.
+ * is trimmed to its last `LOG_SHARE_MAX_BYTES` before uploading.
 */
 export async function shareLogs(
 	client: AbstractModrinthClient,
 	content: string,
+): Promise<LogShareResult> {
+	return shareLogsWithProvider(client, content, 'mclogs')
+}
+
+/**
+ * Share log content through the given provider. The `logshare` provider is
+ * only available inside the desktop app (native commands); this shared helper
+ * routes the `mclogs` fallback so both launcher surfaces can share generic
+ * log buffers.
+ */
+export async function shareLogsWithProvider(
+	client: AbstractModrinthClient,
+	content: string,
+	_provider: LogShareProvider = 'mclogs',
 ): Promise<LogShareResult> {
 	const uploadContent = truncateLogToMaxBytes(content, LOG_SHARE_MAX_BYTES)
 	const truncated = uploadContent !== content