xto-fronted 0.4.71 → 0.4.73

package/package.json

@@ -1,87 +1,90 @@
-{
-  "name": "xto-fronted",
-  "version": "0.4.71",
-  "private": false,
-  "type": "module",
-  "description": "XTO 前端应用框架",
-  "main": "dist/index.umd.js",
-  "module": "dist/index.es.js",
-  "types": "dist/index.d.ts",
-  "exports": {
-    ".": {
-      "import": "./dist/index.es.js",
-      "require": "./dist/index.umd.js",
-      "types": "./dist/index.d.ts"
-    },
-    "./style.css": "./dist/style.css",
-    "./style.scss": "./src/style.scss"
-  },
-  "files": [
-    "dist",
-    "src",
-    "public",
-    "index.html",
-    "vite.config.ts",
-    "tsconfig.json",
-    "tsconfig.node.json",
-    ".env.development",
-    ".env.production"
-  ],
-  "scripts": {
-    "dev": "vite",
-    "build": "vue-tsc && vite build",
-    "build:lib": "vue-tsc && vite build --mode lib",
-    "preview": "vite preview",
-    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix"
-  },
-  "peerDependencies": {
-    "@xto/base": "^1.3.6",
-    "@xto/business": "^1.1.1",
-    "@xto/core": "^1.0.3",
-    "@xto/data": "^1.1.3",
-    "@xto/feedback": "^1.1.8",
-    "@xto/form": "^1.1.3",
-    "@xto/layout": "^1.0.7",
-    "@xto/navigation": "^1.2.6",
-    "axios": "^1.6.0",
-    "pinia": "^2.1.0",
-    "vue": "^3.4.0",
-    "vue-router": "^4.3.0"
-  },
-  "devDependencies": {
-    "@types/node": "^20.11.30",
-    "@vitejs/plugin-vue": "^5.0.4",
-    "@xto/base": "^1.3.6",
-    "@xto/business": "^1.1.1",
-    "@xto/core": "^1.0.3",
-    "@xto/data": "^1.1.3",
-    "@xto/feedback": "^1.1.8",
-    "@xto/form": "^1.1.3",
-    "@xto/layout": "^1.0.7",
-    "@xto/navigation": "^1.2.6",
-    "axios": "^1.6.8",
-    "pinia": "^2.1.7",
-    "sass": "^1.72.0",
-    "sass-embedded": "^1.72.0",
-    "typescript": "^5.4.2",
-    "vite": "^5.2.0",
-    "vite-plugin-dts": "^4.5.4",
-    "vue": "^3.4.21",
-    "vue-router": "^4.3.0",
-    "vue-tsc": "^2.0.6"
-  },
-  "keywords": [
-    "vue",
-    "vue3",
-    "admin",
-    "template",
-    "xto"
-  ],
-  "author": "",
-  "license": "MIT",
-  "homepage": "https://jinguchu.github.io/xto-ui/",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/jinguchu/xto-ui.git"
-  }
-}
+{
+  "name": "xto-fronted",
+  "version": "0.4.73",
+  "private": false,
+  "type": "module",
+  "description": "XTO 前端应用框架",
+  "main": "dist/index.umd.js",
+  "module": "dist/index.es.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.umd.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./style.css": "./dist/style.css",
+    "./style.scss": "./src/style.scss"
+  },
+  "files": [
+    "dist",
+    "src",
+    "public",
+    "index.html",
+    "vite.config.ts",
+    "tsconfig.json",
+    "tsconfig.node.json",
+    ".env.development",
+    ".env.production"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc && vite build",
+    "build:lib": "vue-tsc && vite build --mode lib",
+    "preview": "vite preview",
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix"
+  },
+  "peerDependencies": {
+    "@xto/base": "^1.3.6",
+    "@xto/business": "^1.1.1",
+    "@xto/core": "^1.0.3",
+    "@xto/data": "^1.1.3",
+    "@xto/feedback": "^1.1.8",
+    "@xto/form": "^1.1.3",
+    "@xto/layout": "^1.0.7",
+    "@xto/navigation": "^1.2.6",
+    "axios": "^1.6.0",
+    "pinia": "^2.1.0",
+    "vue": "^3.4.0",
+    "vue-router": "^4.3.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.11.30",
+    "@vitejs/plugin-vue": "^5.0.4",
+    "@xto/base": "^1.3.6",
+    "@xto/business": "^1.1.1",
+    "@xto/core": "^1.0.3",
+    "@xto/data": "^1.1.3",
+    "@xto/feedback": "^1.1.8",
+    "@xto/form": "^1.1.3",
+    "@xto/layout": "^1.0.7",
+    "@xto/navigation": "^1.2.8",
+    "axios": "^1.6.8",
+    "pinia": "^2.1.7",
+    "sass": "^1.72.0",
+    "sass-embedded": "^1.72.0",
+    "typescript": "^5.4.2",
+    "vite": "^5.2.0",
+    "vite-plugin-dts": "^4.5.4",
+    "vue": "^3.4.21",
+    "vue-router": "^4.3.0",
+    "vue-tsc": "^2.0.6"
+  },
+  "keywords": [
+    "vue",
+    "vue3",
+    "admin",
+    "template",
+    "xto"
+  ],
+  "author": "",
+  "license": "MIT",
+  "homepage": "https://jinguchu.github.io/xto-ui/",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/jinguchu/xto-ui.git"
+  },
+  "dependencies": {
+    "xto-fronted": "0.4.71"
+  }
+}

package/src/App.vue

@@ -15,6 +15,35 @@ const appStore = useAppStore()
   width: 100%;
   height: 100%;
   background-color: var(--bg-color-page);
-  transition: background-color 0.3s;
+  transition: background-color 0.3s var(--transition-easing);
+  font-family: var(--font-family);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+// 全局滚动条样式 - 企业级精致感
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--color-border-light);
+  border-radius: 4px;
+  transition: background 0.2s;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--color-border);
+}
+
+// 选中文本样式
+::selection {
+  background: var(--color-primary-light-5);
+  color: var(--color-primary-dark-2);
 }
 </style>

package/src/assets/styles/_root.scss

@@ -1,99 +1,126 @@
 // ==============================================
-// CSS Variables - 主题变量
+// CSS Variables - 企业级配色方案
+// 参考：阿里 Ant Design Pro、腾讯云控制台
 // ==============================================
 
 :root {
-  // 主题色
-  --color-primary: #409eff;
-  --color-primary-light-3: #79bbff;
-  --color-primary-light-5: #a0cfff;
-  --color-primary-light-7: #c6e2ff;
-  --color-primary-light-8: #d9ecff;
-  --color-primary-light-9: #ecf5ff;
-  --color-primary-dark-2: #337ecc;
-
-  // 功能色
-  --color-success: #67c23a;
-  --color-success-light: #e1f3d8;
-  --color-success-dark: #529b2e;
-
-  --color-warning: #e6a23c;
-  --color-warning-light: #fdf6ec;
-  --color-warning-dark: #b88230;
-
-  --color-danger: #f56c6c;
-  --color-danger-light: #fde2e2;
-  --color-danger-dark: #c45656;
-
-  --color-info: #909399;
-  --color-info-light: #f4f4f5;
-  --color-info-dark: #73767a;
-
-  // 文字颜色
-  --color-text-primary: #303133;
-  --color-text-regular: #606266;
-  --color-text-secondary: #909399;
-  --color-text-placeholder: #a8abb2;
-  --color-text-disabled: #c0c4cc;
-
-  // 边框颜色
-  --color-border: #dcdfe6;
-  --color-border-light: #e4e7ed;
-  --color-border-lighter: #ebeef5;
-  --color-border-extra-light: #f2f6fc;
-  --color-border-dark: #d4d7de;
-
-  // 填充颜色
-  --color-fill: #f5f7fa;
+  // 主色调 - 科技蓝系（深邃、专业）
+  --color-primary: #1677ff;
+  --color-primary-light-1: #4096ff;
+  --color-primary-light-2: #69b1ff;
+  --color-primary-light-3: #91caff;
+  --color-primary-light-4: #bae0ff;
+  --color-primary-light-5: #e6f4ff;
+  --color-primary-light-6: #f0f8ff;
+  --color-primary-dark-1: #0958d9;
+  --color-primary-dark-2: #003eb3;
+  --color-primary-dark-3: #002c8c;
+
+  // 功能色 - 精致调和
+  --color-success: #52c41a;
+  --color-success-light: #b7eb8f;
+  --color-success-lighter: #f6ffed;
+  --color-success-dark: #389e0d;
+
+  --color-warning: #faad14;
+  --color-warning-light: #ffe58f;
+  --color-warning-lighter: #fffbe6;
+  --color-warning-dark: #d48806;
+
+  --color-danger: #ff4d4f;
+  --color-danger-light: #ffa39e;
+  --color-danger-lighter: #fff2f0;
+  --color-danger-dark: #cf1322;
+
+  --color-info: #1677ff;
+  --color-info-light: #91caff;
+  --color-info-lighter: #e6f4ff;
+  --color-info-dark: #0958d9;
+
+  // 文字颜色 - 层次分明
+  --color-text-primary: #1f1f1f;
+  --color-text-regular: #424242;
+  --color-text-secondary: #757575;
+  --color-text-placeholder: #9e9e9e;
+  --color-text-disabled: #bdbdbd;
+
+  // 边框颜色 - 克制淡雅
+  --color-border: #d9d9d9;
+  --color-border-light: #e8e8e8;
+  --color-border-lighter: #f0f0f0;
+  --color-border-extra-light: #f5f5f5;
+  --color-border-dark: #bfbfbf;
+
+  // 填充颜色 - 背景层次
+  --color-fill: #f5f5f5;
   --color-fill-light: #fafafa;
-  --color-fill-lighter: #fafcff;
+  --color-fill-lighter: #ffffff;
   --color-fill-blank: #ffffff;
+  --color-fill-dark: #e8e8e8;
 
-  // 背景颜色
+  // 背景颜色 - 页面层级
   --bg-color: #ffffff;
-  --bg-color-page: #f2f3f5;
+  --bg-color-page: #f0f2f5;
+  --bg-color-component: #ffffff;
   --bg-color-overlay: #ffffff;
-
-  // 盒子阴影
-  --box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-  --box-shadow-light: 0 2px 8px 0 rgba(0, 0, 0, 0.06);
-  --box-shadow-lighter: 0 1px 4px 0 rgba(0, 0, 0, 0.04);
-  --box-shadow-dark: 0 4px 16px 0 rgba(0, 0, 0, 0.12);
-
-  // 字体
-  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
-    'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
-    'Noto Color Emoji';
+  --bg-color-spotlight: #e6f4ff;
+
+  // 盒子阴影 - 精致层次
+  --box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08),
+                0 3px 6px -4px rgba(0, 0, 0, 0.12),
+                0 9px 28px 8px rgba(0, 0, 0, 0.05);
+  --box-shadow-light: 0 1px 2px 0 rgba(0, 0, 0, 0.03),
+                      0 1px 6px -1px rgba(0, 0, 0, 0.02),
+                      0 2px 4px 0 rgba(0, 0, 0, 0.02);
+  --box-shadow-lighter: 0 1px 4px rgba(0, 0, 0, 0.04);
+  --box-shadow-dark: 0 6px 16px -8px rgba(0, 0, 0, 0.08),
+                     0 9px 28px 8px rgba(0, 0, 0, 0.05),
+                     0 12px 48px 16px rgba(0, 0, 0, 0.03);
+  --box-shadow-card: 0 1px 10px -6px rgba(0, 0, 0, 0.1);
+  --box-shadow-card-hover: 0 6px 16px -8px rgba(0, 0, 0, 0.12);
+
+  // 字体 - 企业级字体栈
+  --font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
+  --font-family-code: 'IBM Plex Mono', 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono',
+    Consolas, 'Courier New', monospace;
   --font-size-base: 14px;
   --font-size-small: 12px;
   --font-size-large: 16px;
-  --font-size-extra-large: 18px;
-
-  // 圆角
-  --border-radius-base: 4px;
-  --border-radius-small: 2px;
+  --font-size-extra-large: 20px;
+  --font-size-title: 24px;
+  --font-size-hero: 38px;
+  --font-line-height: 1.5714285714285714;
+
+  // 圆角 - 精致圆润
+  --border-radius-base: 6px;
+  --border-radius-small: 4px;
   --border-radius-large: 8px;
-  --border-radius-round: 20px;
+  --border-radius-extra-large: 12px;
+  --border-radius-round: 24px;
   --border-radius-circle: 50%;
 
-  // 间距
+  // 间距 - 8px 基础网格
   --spacing-xs: 4px;
   --spacing-sm: 8px;
   --spacing-md: 16px;
   --spacing-lg: 24px;
   --spacing-xl: 32px;
+  --spacing-xxl: 48px;
 
-  // 尺寸
+  // 尺寸 - 组件规格
   --component-size-large: 40px;
   --component-size-default: 32px;
   --component-size-small: 24px;
 
-  // 过渡时间
-  --transition-duration: 0.3s;
-  --transition-duration-fast: 0.2s;
-  --transition-duration-slow: 0.5s;
+  // 过渡 - 流畅动效
+  --transition-duration: 0.2s;
+  --transition-duration-fast: 0.1s;
+  --transition-duration-slow: 0.3s;
+  --transition-easing: cubic-bezier(0.645, 0.045, 0.355, 1);
+  --transition-easing-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
 
-  // z-index
+  // z-index - 层级管理
   --z-index-dropdown: 1000;
   --z-index-sticky: 1020;
   --z-index-fixed: 1030;
@@ -102,39 +129,56 @@
   --z-index-popover: 1060;
   --z-index-tooltip: 1070;
 
-  // 布局
-  --sidebar-width: 210px;
+  // 布局 - 精确尺寸
+  --sidebar-width: 220px;
   --sidebar-collapsed-width: 64px;
-  --header-height: 50px;
+  --header-height: 56px;
   --tabs-height: 40px;
-  --footer-height: 30px;
+  --footer-height: 32px;
+
+  // 特殊效果
+  --gradient-primary: linear-gradient(135deg, #1677ff 0%, #4096ff 100%);
+  --gradient-hero: linear-gradient(135deg, #002c8c 0%, #1677ff 50%, #4096ff 100%);
+  --gradient-card: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 100%);
+  --gradient-mask: linear-gradient(180deg, rgba(0, 44, 140, 0.03) 0%, rgba(0, 0, 0, 0) 100%);
 }
 
-// 暗色主题
+// 暗色主题 - 深邃科技感
 .dark {
-  --color-text-primary: #e5eaf3;
-  --color-text-regular: #cfd3dc;
-  --color-text-secondary: #a3a6ad;
-  --color-text-placeholder: #8d9095;
-  --color-text-disabled: #6c6e72;
-
-  --color-border: #4c4d4f;
-  --color-border-light: #414243;
-  --color-border-lighter: #363637;
-  --color-border-extra-light: #2b2b2c;
-  --color-border-dark: #58585b;
-
-  --color-fill: #303030;
-  --color-fill-light: #262727;
-  --color-fill-lighter: #1d1d1d;
+  --color-text-primary: #ffffff;
+  --color-text-regular: #e0e0e0;
+  --color-text-secondary: #a6a6a6;
+  --color-text-placeholder: #737373;
+  --color-text-disabled: #5c5c5c;
+
+  --color-border: #434343;
+  --color-border-light: #363636;
+  --color-border-lighter: #2a2a2a;
+  --color-border-extra-light: #1f1f1f;
+  --color-border-dark: #5c5c5c;
+
+  --color-fill: #262626;
+  --color-fill-light: #1f1f1f;
+  --color-fill-lighter: #141414;
   --color-fill-blank: #141414;
+  --color-fill-dark: #363636;
 
-  --bg-color: #1d1e1f;
+  --bg-color: #141414;
   --bg-color-page: #0a0a0a;
-  --bg-color-overlay: #1d1e1f;
-
-  --box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3);
-  --box-shadow-light: 0 2px 8px 0 rgba(0, 0, 0, 0.24);
-  --box-shadow-lighter: 0 1px 4px 0 rgba(0, 0, 0, 0.2);
-  --box-shadow-dark: 0 4px 16px 0 rgba(0, 0, 0, 0.36);
+  --bg-color-component: #1f1f1f;
+  --bg-color-overlay: #1f1f1f;
+  --bg-color-spotlight: #111d2c;
+
+  --box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.32),
+                0 3px 6px -4px rgba(0, 0, 0, 0.48),
+                0 9px 28px 8px rgba(0, 0, 0, 0.2);
+  --box-shadow-light: 0 1px 2px 0 rgba(0, 0, 0, 0.16),
+                      0 1px 6px -1px rgba(0, 0, 0, 0.12),
+                      0 2px 4px 0 rgba(0, 0, 0, 0.08);
+  --box-shadow-card: 0 1px 10px -6px rgba(0, 0, 0, 0.32);
+  --box-shadow-card-hover: 0 6px 16px -8px rgba(0, 0, 0, 0.48);
+
+  --gradient-primary: linear-gradient(135deg, #1677ff 0%, #4096ff 100%);
+  --gradient-hero: linear-gradient(135deg, #002c8c 0%, #0958d9 50%, #1677ff 100%);
+  --gradient-card: linear-gradient(180deg, rgba(20, 20, 20, 0) 0%, rgba(20, 20, 20, 0.8) 100%);
 }

package/src/assets/styles/_variables.scss

@@ -2,44 +2,69 @@
 // SCSS Variables - 用于样式计算
 // ==============================================
 
-// 主题色
-$color-primary: #409eff;
-$color-success: #67c23a;
-$color-warning: #e6a23c;
-$color-danger: #f56c6c;
-$color-info: #909399;
+// 主题色 - 科技蓝
+$color-primary: #1677ff;
+$color-primary-light: #4096ff;
+$color-primary-lighter: #91caff;
+$color-primary-dark: #0958d9;
+$color-primary-darker: #003eb3;
+
+// 功能色
+$color-success: #52c41a;
+$color-warning: #faad14;
+$color-danger: #ff4d4f;
+$color-info: #1677ff;
 
 // 文字颜色
-$color-text-primary: #303133;
-$color-text-regular: #606266;
-$color-text-secondary: #909399;
+$color-text-primary: #1f1f1f;
+$color-text-regular: #424242;
+$color-text-secondary: #757575;
+$color-text-placeholder: #9e9e9e;
 
 // 边框颜色
-$color-border: #dcdfe6;
-$color-border-light: #e4e7ed;
-$color-border-lighter: #ebeef5;
+$color-border: #d9d9d9;
+$color-border-light: #e8e8e8;
+$color-border-lighter: #f0f0f0;
 
 // 背景颜色
 $bg-color: #ffffff;
-$bg-color-page: #f2f3f5;
+$bg-color-page: #f0f2f5;
+$bg-color-component: #ffffff;
 
 // 字体
+$font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+$font-family-code: 'IBM Plex Mono', 'SF Mono', Monaco, Consolas, monospace;
 $font-size-base: 14px;
 $font-size-small: 12px;
+$font-size-large: 16px;
+$font-size-extra-large: 20px;
 
 // 圆角
-$border-radius-base: 4px;
+$border-radius-base: 6px;
+$border-radius-small: 4px;
 $border-radius-large: 8px;
+$border-radius-extra-large: 12px;
+$border-radius-round: 24px;
 
-// 间距
+// 间距 - 8px 网格系统
 $spacing-xs: 4px;
 $spacing-sm: 8px;
 $spacing-md: 16px;
 $spacing-lg: 24px;
+$spacing-xl: 32px;
+$spacing-xxl: 48px;
 
-// 布局
-$sidebar-width: 210px;
+// 布局尺寸
+$sidebar-width: 220px;
 $sidebar-collapsed-width: 64px;
-$header-height: 50px;
+$header-height: 56px;
 $tabs-height: 40px;
-$footer-height: 30px;
+$footer-height: 32px;
+
+// 过渡
+$transition-duration: 0.2s;
+$transition-easing: cubic-bezier(0.645, 0.045, 0.355, 1);
+
+// 阴影
+$box-shadow-card: 0 1px 10px -6px rgba(0, 0, 0, 0.1);
+$box-shadow-card-hover: 0 6px 16px -8px rgba(0, 0, 0, 0.12);