@kine-design/crud 0.0.1-beta.24 → 0.0.1-beta.26

package/composables/form/useFormPage.ts

@@ -12,6 +12,7 @@
 
 import { ref, reactive, computed, onMounted, type Ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
+import { getActiveLocaleMessages } from '@kine-design/core';
 import { useRequestClient } from '../../setup';
 import type { FormFieldConfig } from './types';
 
@@ -114,7 +115,8 @@ export function useFormPage(options: UseFormPageOptions): UseFormPageReturn {
     // 必填校验
     if (field.required) {
       if (value === undefined || value === null || value === '') {
-        const msg = `请输入${field.label}`;
+        const t = getActiveLocaleMessages();
+        const msg = t.form.inputPlaceholder(field.label);
         errors.value[param] = msg;
         return msg;
       }

package/composables/page/types.ts

@@ -66,4 +66,6 @@ export interface CrudPageConfig {
   detailPath?: string;
   /** 图片列 src 转换函数，将原始值转为可访问 URL */
   imageResolver?: (raw: string) => string;
+  /** 默认查询参数，始终附带在请求中（用户选择的 filter 值会覆盖同名参数） */
+  defaultParams?: Record<string, unknown>;
 }

package/composables/page/useCrudPage.ts

@@ -43,6 +43,7 @@ export function useCrudPage(config: CrudPageConfig, tableBodyRef?: Ref<HTMLEleme
     loading.value = true;
     try {
       const params: Record<string, unknown> = {
+        ...config.defaultParams,
         page: page.value,
         pageSize: pageSize.value,
       };

package/composables/request/requestBuilder.ts

@@ -21,6 +21,7 @@ import type {
 } from './types';
 import { BusinessError, NetworkRequestError } from './types';
 import { buildCacheKey, ControlGate } from './controlGate';
+import { getActiveLocaleMessages } from '@kine-design/core';
 
 // ────────────────────────────────────────────────────────────────────────────
 // 内部：缓存存储
@@ -89,6 +90,7 @@ function toQueryString(params: Record<string, unknown>): string {
 async function unwrapResponse<T>(
   response: { status: number; statusText: string; headers: Record<string, string>; text(): Promise<string>; json<R>(): Promise<R> },
 ): Promise<T> {
+  const t = getActiveLocaleMessages();
   // HTTP 错误
   if (response.status < 200 || response.status >= 300) {
     // 4xx/5xx：尝试解析 body，提取业务错误信息
@@ -98,7 +100,7 @@ async function unwrapResponse<T>(
         try {
           const json = await response.json<WrappedResponse<unknown>>();
           if (isWrappedResponse(json) && !json.success) {
-            throw new BusinessError(json.message || `请求失败（${response.status}）`);
+            throw new BusinessError(json.message || t.request.failedWithStatus(response.status));
           }
         } catch (e) {
           if (e instanceof BusinessError) throw e;
@@ -121,7 +123,7 @@ async function unwrapResponse<T>(
     // 检查是否为 WrappedResponse 结构
     if (isWrappedResponse<T>(json)) {
       if (!json.success) {
-        throw new BusinessError(json.message || '请求失败');
+        throw new BusinessError(json.message || t.request.failed);
       }
       return json.data;
     }
@@ -277,6 +279,7 @@ export class RequestBuilder {
   // ── 执行 ────────────────────────────────────────────────────────────────
 
   async execute<T>(): Promise<T> {
+    const t = getActiveLocaleMessages();
     const { transport, controlGate, baseURL, defaultHeaders, getToken, onUnauthorized, responseInterceptor, registerAbort } = this.context;
 
     // 构建完整 URL
@@ -364,7 +367,7 @@ export class RequestBuilder {
 
       // 写操作成功后自动反馈
       if (this.context.feedback && ['POST', 'PUT', 'PATCH', 'DELETE'].includes(this.method)) {
-        this.context.feedback.showSuccess('操作成功');
+        this.context.feedback.showSuccess(t.request.success);
       }
 
       return finalResult as T;
@@ -376,8 +379,8 @@ export class RequestBuilder {
       // 写操作失败自动反馈错误信息
       if (this.context.feedback) {
         const msg = error instanceof BusinessError ? error.message
-          : error instanceof NetworkRequestError ? `请求失败: ${error.message}`
-          : '操作失败';
+          : error instanceof NetworkRequestError ? t.request.failedWithMsg(error.message)
+          : t.request.opFailed;
         this.context.feedback.showError(msg);
       }
       throw error;

package/composables/request/transport/xhrTransport.ts

@@ -7,6 +7,7 @@
  * 江湖的业务千篇一律，复杂的代码好几百行。
  */
 
+import { getActiveLocaleMessages } from '@kine-design/core';
 import type { Transport, TransportRequest, TransportResponse } from '../types';
 
 /** 解析 XHR 响应头字符串为 Record */
@@ -27,6 +28,7 @@ function parseResponseHeaders(rawHeaders: string): Record<string, string> {
 
 export class XhrTransport implements Transport {
   send(request: TransportRequest): Promise<TransportResponse> {
+    const t = getActiveLocaleMessages();
     return new Promise((resolve, reject) => {
       const xhr = new XMLHttpRequest();
 
@@ -83,7 +85,7 @@ export class XhrTransport implements Transport {
       };
 
       xhr.onerror = () => {
-        reject({ type: 'unknown' as const, error: new Error('网络错误') });
+        reject({ type: 'unknown' as const, error: new Error(t.request.networkError) });
       };
 
       xhr.ontimeout = () => {

package/composables/request/types.ts

@@ -7,6 +7,8 @@
  * 江湖的业务千篇一律，复杂的代码好几百行。
  */
 
+import { getActiveLocaleMessages } from '@kine-design/core';
+
 // ────────────────────────────────────────────────────────────────────────────
 // 请求方法
 // ────────────────────────────────────────────────────────────────────────────
@@ -111,13 +113,14 @@ export class NetworkRequestError extends Error {
 }
 
 function networkErrorMessage(e: NetworkError): string {
+  const t = getActiveLocaleMessages();
   switch (e.type) {
-    case 'invalidURL': return `无效的 URL: ${e.url}`;
-    case 'timeout': return '请求超时';
+    case 'invalidURL': return t.request.invalidUrl(e.url);
+    case 'timeout': return t.request.timeout;
     case 'httpError': return `HTTP ${e.status} ${e.statusText}`;
-    case 'decodingFailed': return `解码失败: ${e.reason}`;
-    case 'aborted': return '请求已取消';
-    case 'unknown': return `未知错误: ${String(e.error)}`;
+    case 'decodingFailed': return t.request.decodeFailed(e.reason);
+    case 'aborted': return t.request.canceled;
+    case 'unknown': return t.request.unknownError(String(e.error));
   }
 }
 

package/composables/request/upload.ts

@@ -8,6 +8,7 @@
  */
 
 import { ref, type Ref } from 'vue';
+import { getActiveLocaleMessages } from '@kine-design/core';
 import type { UploaderOptions, UploadOptions, WrappedResponse } from './types';
 import { BusinessError, NetworkRequestError } from './types';
 import { XhrTransport } from './transport/xhrTransport';
@@ -55,6 +56,7 @@ export function createUploader(uploaderOptions: UploaderOptions = {}): Uploader
   }
 
   function doUpload<T>(formData: FormData, options: UploadOptions): UploadHandle<T> {
+    const t = getActiveLocaleMessages();
     const progress = ref(0);
     const abortController = new AbortController();
 
@@ -83,7 +85,7 @@ export function createUploader(uploaderOptions: UploaderOptions = {}): Uploader
       if (contentType.includes('application/json')) {
         const json = await response.json<WrappedResponse<T> | T>();
         if (isWrappedResponse<T>(json)) {
-          if (!json.success) throw new BusinessError(json.message || '上传失败');
+          if (!json.success) throw new BusinessError(json.message || t.request.uploadFailed);
           return json.data;
         }
         return json as T;
@@ -94,7 +96,7 @@ export function createUploader(uploaderOptions: UploaderOptions = {}): Uploader
 
     return {
       progress,
-      abort: () => abortController.abort('上传已取消'),
+      abort: () => abortController.abort(t.request.uploadCanceled),
       promise,
     };
   }

package/composables/router/defineCrudRoutes.ts

@@ -7,6 +7,7 @@
  * 江湖的业务千篇一律，复杂的代码好几百行。
  */
 
+import { getActiveLocaleMessages } from '@kine-design/core';
 import type { CrudRouteConfig, CrudRouteRecord } from './types';
 
 // ────────────────────────────────────────────────────────────────────────────
@@ -62,15 +63,16 @@ interface OpSpec {
 export function defineCrudRoutes(config: CrudRouteConfig): CrudRouteRecord[] {
   const { name, path, permission, title, icon } = config;
   const resource = permission ?? name.toLowerCase();
+  const t = getActiveLocaleMessages();
 
   // 规范化 basePath，确保以 / 开头、不以 / 结尾
   const basePath = path.replace(/\/+$/, '');
 
   const opSpecs: OpSpec[] = [
     { op: 'list',   suffix: '',          action: 'read',   component: config.list,   titleSuffix: '', keepAlive: true,  hidden: false },
-    { op: 'new',    suffix: '/new',       action: 'create', component: config.new,    titleSuffix: ' - 新建', keepAlive: false, hidden: true },
-    { op: 'modify', suffix: '/:id/edit',  action: 'update', component: config.modify, titleSuffix: ' - 编辑', keepAlive: false, hidden: true },
-    { op: 'detail', suffix: '/:id',       action: 'read',   component: config.detail, titleSuffix: ' - 详情', keepAlive: false, hidden: true },
+    { op: 'new',    suffix: '/new',       action: 'create', component: config.new,    titleSuffix: t.routes.createSuffix, keepAlive: false, hidden: true },
+    { op: 'modify', suffix: '/:id/edit',  action: 'update', component: config.modify, titleSuffix: t.routes.editSuffix, keepAlive: false, hidden: true },
+    { op: 'detail', suffix: '/:id',       action: 'read',   component: config.detail, titleSuffix: t.routes.detailSuffix, keepAlive: false, hidden: true },
   ];
 
   const routes: CrudRouteRecord[] = [];

package/dist/components/editableTable/KEditableTable.d.ts

@@ -60,12 +60,12 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     /** 汇总行标签 */
     summaryLabel: {
         type: StringConstructor;
-        default: string;
+        default: undefined;
     };
     /** 新增行按钮文本 */
     addText: {
         type: StringConstructor;
-        default: string;
+        default: undefined;
     };
     /** 是否可新增 */
     addable: {
@@ -77,7 +77,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         type: StringConstructor;
         default: string;
     };
-}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("add" | "update:modelValue" | "remove")[], "add" | "update:modelValue" | "remove", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("update:modelValue" | "add" | "remove")[], "update:modelValue" | "add" | "remove", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     /** 列定义 */
     columns: {
         type: PropType<EditableColumn[]>;
@@ -111,12 +111,12 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     /** 汇总行标签 */
     summaryLabel: {
         type: StringConstructor;
-        default: string;
+        default: undefined;
     };
     /** 新增行按钮文本 */
     addText: {
         type: StringConstructor;
-        default: string;
+        default: undefined;
     };
     /** 是否可新增 */
     addable: {

package/dist/composables/page/types.d.ts

@@ -68,4 +68,6 @@ export interface CrudPageConfig {
     detailPath?: string;
     /** 图片列 src 转换函数，将原始值转为可访问 URL */
     imageResolver?: (raw: string) => string;
+    /** 默认查询参数，始终附带在请求中（用户选择的 filter 值会覆盖同名参数） */
+    defaultParams?: Record<string, unknown>;
 }

package/dist/crud.css

@@ -315,11 +315,11 @@
 
 /* 行 hover 效果 */
 .k-tbody .k-tr {
-  transition: background var(--kine-motion-duration-fast);
+  transition: background var(--kine-interaction-transition-duration);
 }
 
 .k-tbody .k-tr:hover {
-  background: var(--kine-color-bg-hover);
+  background: var(--kine-color-neutral-3);
 }
 
 /* 空数据占位 */
@@ -397,23 +397,23 @@
   border: 1px solid transparent;
   color: var(--kine-color-text-secondary);
   cursor: pointer;
-  transition: background var(--kine-motion-duration-fast), color var(--kine-motion-duration-fast);
+  transition: background var(--kine-interaction-transition-duration), color var(--kine-interaction-transition-duration);
 }
 
 .k-pager:hover {
-  background: var(--kine-color-bg-hover);
+  background: var(--kine-color-neutral-3);
   color: var(--kine-color-text-primary);
 }
 
 /* 当前页高亮 */
 .k-pager-current {
   color: var(--kine-color-accent-default);
-  background: color-mix(in srgb, var(--kine-color-accent-default) 10%, transparent);
-  border-color: color-mix(in srgb, var(--kine-color-accent-default) 30%, transparent);
+  background: var(--kine-color-accent-light);
+  border-color: color-mix(in srgb, var(--kine-color-accent-default) var(--kine-interaction-focus-glow), transparent);
 }
 
 .k-pager-current:hover {
-  background: color-mix(in srgb, var(--kine-color-accent-default) 15%, transparent);
+  background: color-mix(in srgb, var(--kine-color-accent-default) var(--kine-interaction-hover-intensity), transparent);
   color: var(--kine-color-accent-hover);
 }
 
@@ -440,12 +440,12 @@
   color: var(--kine-color-text-secondary);
   font-size: var(--kine-font-size-2xl);
   cursor: pointer;
-  transition: background var(--kine-motion-duration-fast), color var(--kine-motion-duration-fast);
+  transition: background var(--kine-interaction-transition-duration), color var(--kine-interaction-transition-duration);
 }
 
 .k-page-prev:hover,
 .k-page-next:hover {
-  background: var(--kine-color-bg-hover);
+  background: var(--kine-color-neutral-3);
   color: var(--kine-color-text-primary);
 }
 
@@ -485,7 +485,7 @@
   color: var(--kine-color-text-primary);
   cursor: pointer;
   outline: none;
-  transition: all var(--kine-motion-duration-fast) var(--kine-motion-easing-default);
+  transition: all var(--kine-interaction-transition-duration) var(--kine-motion-easing-default);
   user-select: none;
   display: inline-flex;
   align-items: center;
@@ -494,31 +494,31 @@
 
 /* === default hover/active === */
 .k-button:hover {
-  background: var(--kine-color-bg-hover);
-  border-color: var(--kine-color-text-secondary);
-  color: #ffffff;
+  background: var(--kine-color-neutral-3);
+  border-color: var(--kine-color-neutral-5);
+  color: var(--kine-color-text-inverse);
 }
 
 .k-button:active {
-  background: var(--kine-color-border-subtle);
+  background: var(--kine-color-neutral-4);
 }
 
 /* === primary === */
 .k-button-primary {
-  background: color-mix(in srgb, var(--kine-color-accent-default) 10%, var(--kine-color-bg-tertiary));
+  background: var(--kine-color-accent-light);
   border-color: var(--kine-color-accent-default);
   color: var(--kine-color-accent-default);
 }
 
 .k-button-primary:hover {
-  background: color-mix(in srgb, var(--kine-color-accent-default) 18%, var(--kine-color-bg-primary));
+  background: color-mix(in srgb, var(--kine-color-accent-default) var(--kine-interaction-hover-intensity), var(--kine-color-bg-primary));
   border-color: var(--kine-color-accent-hover);
   color: var(--kine-color-accent-hover);
-  text-shadow: 0 0 6px color-mix(in srgb, var(--kine-color-accent-default) 50%, transparent);
+  text-shadow: 0 0 6px color-mix(in srgb, var(--kine-color-accent-default) var(--kine-interaction-text-glow), transparent);
 }
 
 .k-button-primary:active {
-  background: color-mix(in srgb, var(--kine-color-accent-default) 25%, var(--kine-color-bg-primary));
+  background: color-mix(in srgb, var(--kine-color-accent-default) var(--kine-interaction-active-intensity), var(--kine-color-bg-primary));
 }
 
 /* === success === */
@@ -528,14 +528,14 @@
 }
 
 .k-button-success:hover {
-  background: color-mix(in srgb, var(--kine-color-semantic-success) 12%, var(--kine-color-bg-primary));
+  background: color-mix(in srgb, var(--kine-color-semantic-success) var(--kine-interaction-hover-intensity), var(--kine-color-bg-primary));
   border-color: var(--kine-color-semantic-success-hover);
   color: var(--kine-color-semantic-success-hover);
-  text-shadow: 0 0 6px color-mix(in srgb, var(--kine-color-semantic-success) 50%, transparent);
+  text-shadow: 0 0 6px color-mix(in srgb, var(--kine-color-semantic-success) var(--kine-interaction-text-glow), transparent);
 }
 
 .k-button-success:active {
-  background: color-mix(in srgb, var(--kine-color-semantic-success) 20%, var(--kine-color-bg-primary));
+  background: color-mix(in srgb, var(--kine-color-semantic-success) var(--kine-interaction-active-intensity), var(--kine-color-bg-primary));
 }
 
 /* === warning === */
@@ -545,14 +545,14 @@
 }
 
 .k-button-warning:hover {
-  background: color-mix(in srgb, var(--kine-color-semantic-warning) 12%, var(--kine-color-bg-primary));
+  background: color-mix(in srgb, var(--kine-color-semantic-warning) var(--kine-interaction-hover-intensity), var(--kine-color-bg-primary));
   border-color: var(--kine-color-semantic-warning-hover);
   color: var(--kine-color-semantic-warning-hover);
-  text-shadow: 0 0 6px color-mix(in srgb, var(--kine-color-semantic-warning) 50%, transparent);
+  text-shadow: 0 0 6px color-mix(in srgb, var(--kine-color-semantic-warning) var(--kine-interaction-text-glow), transparent);
 }
 
 .k-button-warning:active {
-  background: color-mix(in srgb, var(--kine-color-semantic-warning) 20%, var(--kine-color-bg-primary));
+  background: color-mix(in srgb, var(--kine-color-semantic-warning) var(--kine-interaction-active-intensity), var(--kine-color-bg-primary));
 }
 
 /* === danger === */
@@ -562,31 +562,31 @@
 }
 
 .k-button-danger:hover {
-  background: color-mix(in srgb, var(--kine-color-semantic-error) 12%, var(--kine-color-bg-primary));
+  background: color-mix(in srgb, var(--kine-color-semantic-error) var(--kine-interaction-hover-intensity), var(--kine-color-bg-primary));
   border-color: var(--kine-color-semantic-error-hover);
   color: var(--kine-color-semantic-error-hover);
-  text-shadow: 0 0 6px color-mix(in srgb, var(--kine-color-semantic-error) 50%, transparent);
+  text-shadow: 0 0 6px color-mix(in srgb, var(--kine-color-semantic-error) var(--kine-interaction-text-glow), transparent);
 }
 
 .k-button-danger:active {
-  background: color-mix(in srgb, var(--kine-color-semantic-error) 20%, var(--kine-color-bg-primary));
+  background: color-mix(in srgb, var(--kine-color-semantic-error) var(--kine-interaction-active-intensity), var(--kine-color-bg-primary));
 }
 
 /* === info === */
 .k-button-info {
-  border-color: var(--kine-color-semantic-info, #64748b);
-  color: var(--kine-color-semantic-info, #64748b);
+  border-color: var(--kine-color-semantic-info);
+  color: var(--kine-color-semantic-info);
 }
 
 .k-button-info:hover {
-  background: color-mix(in srgb, var(--kine-color-semantic-info, #64748b) 12%, var(--kine-color-bg-primary));
-  border-color: var(--kine-color-semantic-info-hover, #94a3b8);
-  color: var(--kine-color-semantic-info-hover, #94a3b8);
-  text-shadow: 0 0 6px color-mix(in srgb, var(--kine-color-semantic-info, #64748b) 50%, transparent);
+  background: color-mix(in srgb, var(--kine-color-semantic-info) var(--kine-interaction-hover-intensity), var(--kine-color-bg-primary));
+  border-color: var(--kine-color-semantic-info-hover);
+  color: var(--kine-color-semantic-info-hover);
+  text-shadow: 0 0 6px color-mix(in srgb, var(--kine-color-semantic-info) var(--kine-interaction-text-glow), transparent);
 }
 
 .k-button-info:active {
-  background: color-mix(in srgb, var(--kine-color-semantic-info, #64748b) 20%, var(--kine-color-bg-primary));
+  background: color-mix(in srgb, var(--kine-color-semantic-info) var(--kine-interaction-active-intensity), var(--kine-color-bg-primary));
 }
 
 /* === disabled === */
@@ -626,13 +626,13 @@
 }
 
 .k-button-plain:hover {
-  background: var(--kine-color-bg-hover);
+  background: var(--kine-color-neutral-3);
   border-color: transparent;
-  color: #ffffff;
+  color: var(--kine-color-text-inverse);
 }
 
 .k-button-plain:active {
-  background: var(--kine-color-border-subtle);
+  background: var(--kine-color-neutral-4);
 }
 
 /* === link === */
@@ -648,7 +648,7 @@
   color: var(--kine-color-accent-hover);
   border-color: transparent;
   background: transparent;
-  text-shadow: 0 0 6px color-mix(in srgb, var(--kine-color-accent-default) 50%, transparent);
+  text-shadow: 0 0 6px color-mix(in srgb, var(--kine-color-accent-default) var(--kine-interaction-text-glow), transparent);
 }
 
 /* === size variants === */
@@ -819,31 +819,31 @@
 .k-tag-primary {
   border-color: var(--kine-color-accent-default);
   color: var(--kine-color-accent-default);
-  background: color-mix(in srgb, var(--kine-color-accent-default) 10%, var(--kine-color-bg-tertiary));
+  background: var(--kine-color-accent-light);
 }
 
 .k-tag-success {
   border-color: var(--kine-color-semantic-success);
   color: var(--kine-color-semantic-success);
-  background: color-mix(in srgb, var(--kine-color-semantic-success) 10%, var(--kine-color-bg-tertiary));
+  background: var(--kine-color-semantic-success-light);
 }
 
 .k-tag-warning {
   border-color: var(--kine-color-semantic-warning);
   color: var(--kine-color-semantic-warning);
-  background: color-mix(in srgb, var(--kine-color-semantic-warning) 10%, var(--kine-color-bg-tertiary));
+  background: var(--kine-color-semantic-warning-light);
 }
 
 .k-tag-danger {
   border-color: var(--kine-color-semantic-error);
   color: var(--kine-color-semantic-error);
-  background: color-mix(in srgb, var(--kine-color-semantic-error) 10%, var(--kine-color-bg-tertiary));
+  background: var(--kine-color-semantic-error-light);
 }
 
 .k-tag-info {
   border-color: var(--kine-color-semantic-info);
   color: var(--kine-color-semantic-info);
-  background: color-mix(in srgb, var(--kine-color-semantic-info) 10%, var(--kine-color-bg-tertiary));
+  background: var(--kine-color-semantic-info-light);
 }
 
 /* === 尺寸变体 === */
@@ -874,12 +874,12 @@
   cursor: pointer;
   opacity: 0.6;
   border-radius: 50%;
-  transition: opacity var(--kine-motion-duration-fast), background var(--kine-motion-duration-fast);
+  transition: opacity var(--kine-interaction-transition-duration), background var(--kine-interaction-transition-duration);
 }
 
 .k-tag-close:hover {
   opacity: 1;
-  background: color-mix(in srgb, currentColor 20%, transparent);
+  background: color-mix(in srgb, currentColor var(--kine-interaction-active-intensity), transparent);
 }
 
 /* === 禁用状态 === */
@@ -989,7 +989,7 @@
   max-height: 85vh;
   object-fit: contain;
   border-radius: var(--kine-radius-xs);
-  box-shadow: 0 0 40px color-mix(in srgb, var(--kine-color-accent-default) 20%, transparent);
+  box-shadow: 0 0 40px color-mix(in srgb, var(--kine-color-accent-default) var(--kine-interaction-active-intensity), transparent);
   transition: transform var(--kine-motion-duration-fast) var(--kine-motion-easing-default);
   user-select: none;
 }
@@ -1024,18 +1024,18 @@
   font-size: 16px;
   cursor: pointer;
   transition:
-    color var(--kine-motion-duration-fast) var(--kine-motion-easing-default),
-    background var(--kine-motion-duration-fast) var(--kine-motion-easing-default);
+    color var(--kine-interaction-transition-duration) var(--kine-motion-easing-default),
+    background var(--kine-interaction-transition-duration) var(--kine-motion-easing-default);
 }
 
 .k-image-preview-btn:hover {
   color: var(--kine-color-text-primary);
-  background: color-mix(in srgb, var(--kine-color-accent-default) 15%, transparent);
+  background: color-mix(in srgb, var(--kine-color-accent-default) var(--kine-interaction-hover-intensity), transparent);
 }
 
 .k-image-preview-close:hover {
   color: var(--kine-color-semantic-error);
-  background: color-mix(in srgb, var(--kine-color-semantic-error) 15%, transparent);
+  background: color-mix(in srgb, var(--kine-color-semantic-error) var(--kine-interaction-hover-intensity), transparent);
 }
 
 /* 当前缩放比例显示 */
@@ -1063,8 +1063,8 @@
   font-size: 26px;
   cursor: pointer;
   transition:
-    background var(--kine-motion-duration-fast) var(--kine-motion-easing-default),
-    border-color var(--kine-motion-duration-fast) var(--kine-motion-easing-default);
+    background var(--kine-interaction-transition-duration) var(--kine-motion-easing-default),
+    border-color var(--kine-interaction-transition-duration) var(--kine-motion-easing-default);
 }
 
 .k-image-preview-arrow:hover {
@@ -1126,7 +1126,7 @@
 
 .k-input:focus {
   border-color: var(--kine-color-accent-default);
-  box-shadow: 0 0 var(--kine-shadow-glow-radius) color-mix(in srgb, var(--kine-color-accent-default) 30%, transparent);
+  box-shadow: 0 0 var(--kine-shadow-glow-radius) color-mix(in srgb, var(--kine-color-accent-default) var(--kine-interaction-focus-glow), transparent);
 }
 
 .k-input-disabled {
@@ -1222,7 +1222,7 @@ textarea.k-input {
 
 .k-select-trigger:focus-within {
   border-color: var(--kine-color-accent-default);
-  box-shadow: 0 0 var(--kine-shadow-glow-radius) color-mix(in srgb, var(--kine-color-accent-default) 30%, transparent);
+  box-shadow: 0 0 var(--kine-shadow-glow-radius) color-mix(in srgb, var(--kine-color-accent-default) var(--kine-interaction-focus-glow), transparent);
 }
 
 .k-select-trigger-multiple {
@@ -1340,16 +1340,16 @@ textarea.k-input {
 }
 
 .k-select-dropdown .m-option:hover {
-  background-color: var(--kine-color-bg-hover);
+  background-color: var(--kine-color-neutral-3);
 }
 
 .k-select-dropdown .m-option-selected {
   color: var(--kine-color-accent-default);
-  background-color: color-mix(in srgb, var(--kine-color-accent-default) 10%, transparent);
+  background-color: var(--kine-color-accent-light);
 }
 
 .k-select-dropdown .m-option-selected:hover {
-  background-color: color-mix(in srgb, var(--kine-color-accent-default) 16%, transparent);
+  background-color: color-mix(in srgb, var(--kine-color-accent-default) var(--kine-interaction-hover-intensity), transparent);
 }
 
 .k-select-dropdown .m-option-disabled {