xt-element-ui 1.2.1 → 1.2.3

package/src/components/ex-table/virtualScrollData.js

@@ -0,0 +1,35 @@
+/**
+ * 生成虚拟滚动演示数据
+ * @param {number} count 数据条数，默认 10000
+ * @returns {Array}
+ */
+export function createVirtualScrollData(count = 10000) {
+  const departments = ['研发部', '产品部', '运营部', '财务部', '市场部']
+  const positions = ['工程师', '产品经理', '运营专员', '财务主管', '市场经理']
+  const statuses = ['在职', '休假', '离职']
+
+  return Array.from({ length: count }, (_, i) => ({
+    id: i + 1,
+    name: `用户${i + 1}`,
+    department: departments[i % departments.length],
+    position: positions[i % positions.length],
+    email: `user${i + 1}@example.com`,
+    phone: `13800138${String(i).padStart(4, '0')}`,
+    address: `北京市朝阳区第${i + 1}号街道`,
+    salary: 5000 + Math.floor(Math.random() * 10000),
+    status: statuses[i % statuses.length]
+  }))
+}
+
+/** 虚拟滚动演示列配置 */
+export const virtualScrollColumns = [
+  { prop: 'id', label: 'ID', fixed: 'left', width: 80 },
+  { prop: 'name', label: '姓名', fixed: 'left', width: 120 },
+  { prop: 'department', label: '部门', width: 150 },
+  { prop: 'position', label: '职位', width: 150 },
+  { prop: 'email', label: '邮箱', width: 200 },
+  { prop: 'phone', label: '电话', width: 130 },
+  { prop: 'address', label: '地址', width: 200 },
+  { prop: 'salary', label: '薪资', width: 120 },
+  { prop: 'status', label: '状态', fixed: 'right', width: 100 }
+]

package/src/components/ex-upload/index.js

@@ -0,0 +1,2 @@
+import ExUpload from './index.vue'
+export default ExUpload

package/src/components/xt-config-provider/index.js

@@ -1,2 +1,2 @@
-import ConfigProvider from './index.vue'
-export default ConfigProvider
+import XtConfigProvider from './index.vue'
+export default XtConfigProvider

package/src/components/xt-config-provider/index.vue

@@ -1,4 +1,5 @@
 <script>
+import EchartsUtil from '../ex-chart/utils.js'
 export default {
   name: 'XtConfigProvider',
   inheritAttrs: false,
@@ -13,25 +14,25 @@ export default {
   },
   watch: {
     theme(newVal) {
-      this.$provide('xtConfig', {
+      this.xtConfig ={
         theme: newVal,
         size: this.size,
         primaryColor: this.primaryColor
-      })
+      }
     },
     size(newVal) {
-      this.$provide('xtConfig', {
-        theme: this.theme,
-        size: newVal,
+      this.xtConfig ={
+        theme: newVal,
+        size: this.size,
         primaryColor: this.primaryColor
-      })
+      }
     },
     primaryColor(newVal) {
-      this.$provide('xtConfig', {
-        theme: this.theme,
+      this.xtConfig ={
+        theme: newVal,
         size: this.size,
-        primaryColor: newVal
-      })
+        primaryColor: this.primaryColor
+      }
     }
   },
   render(h) {
@@ -139,9 +140,9 @@ export default {
       }
       
       const sizeMap = {
-        small: '12px',
-        medium: '14px',
-        large: '16px'
+        small: '14px',
+        medium: '16px',
+        large: '18px'
       }
       if (sizeMap[this.size]) {
         result['--xt-font-size-base'] = sizeMap[this.size]
@@ -308,6 +309,9 @@ export default {
       
       // 设置 data-theme 属性
       element.setAttribute('data-theme', this.theme)
+
+      // 更新图表颜色
+      EchartsUtil.changeAllTheme(this.theme, this.size, this.primaryColor)
       
       // 触发主题改变钩子（当主题实际发生变化时）
       if (prevTheme !== this.theme && typeof this.onThemeChange === 'function') {

package/src/components/xt-text/style/index.scss

@@ -76,17 +76,17 @@
 }
 
 // 暗色主题
-html[data-theme='dark'] .xt-text--primary {
-}
-
-html[data-theme='dark'] .xt-text--success {
-  color: $xt-dark-color-success;
-}
-
-html[data-theme='dark'] .xt-text--warning {
-  color: $xt-dark-color-warning;
-}
-
-html[data-theme='dark'] .xt-text--danger {
-  color: $xt-dark-color-danger;
+[data-theme='dark'], html.dark {
+  .xt-text--primary {
+    color: $xt-dark-color-primary;
+  }
+  .xt-text--success {
+    color: $xt-dark-color-success;
+  }
+  .xt-text--warning {
+    color: $xt-dark-color-warning;
+  }
+  .xt-text--danger {
+    color: $xt-dark-color-danger;
+  }
 }

package/src/index.js

@@ -96,6 +96,7 @@ const install = function (Vue, options = {}) {
     }
   }
 
+if (process.env.NODE_ENV === 'development') {
   // 导入内部 element-ui 依赖（作为内部依赖，不与外部冲突）
   const ElementUI = require('element-ui')
   
@@ -104,7 +105,6 @@ const install = function (Vue, options = {}) {
   // ex-table 等组件内部会直接使用 element-ui 的组件
   
   // 在开发环境下注册 ElementUI 组件为 Ex 开头（方便文档和示例使用）
-  if (process.env.NODE_ENV === 'development') {
     registerElementExComponents(Vue, ElementUI)
   }
 
@@ -140,6 +140,9 @@ export default {
 // ExChart 组件按需导出（使用时需自行安装 echarts 依赖）
 export { default as ExChart } from './components/ex-chart'
 
+// ExTable 虚拟滚动演示数据工具
+export { createVirtualScrollData, virtualScrollColumns } from './components/ex-table/virtualScrollData'
+
 // 导出工具函数和变量
 export {
   utils,

package/src/styles/css-variables.scss

@@ -183,8 +183,7 @@
 // 暗色主题（参考 Element Plus）
 // ============================
 :root[data-theme="dark"],
-html[data-theme="dark"],
-[data-theme="dark"] {
+[data-theme="dark"], html.dark {
     color-scheme: dark;
     --xt-color-primary: #409eff;
     --xt-color-primary-light-3: rgb(51, 117, 185);

package/src/styles/element-theme.scss

@@ -1,4 +1,4 @@
-@use './variables.scss' as *;
+@import './variables.scss';
 
 /* Element UI 风格主题 */
 :root {
@@ -21,10 +21,13 @@
   --el-text-color-secondary: #909399;
   --el-text-color-placeholder: #c0c4cc;
   --el-text-color-disabled: #c0c4cc;
+  --el-text-color-white: #ffffff;
   
   /* 背景色 */
   --el-bg-color: #ffffff;
   --el-bg-color-page: #f5f7fa;
+  --el-bg-color-block: #ffffff;
+  --el-bg-color-block-head: #ffffff;
   --el-bg-color-overlay: #ffffff;
   
   /* 边框颜色 */
@@ -64,9 +67,12 @@
   --el-transition-duration-fast: 0.2s;
 }
 
+
 /* 深色主题 */
-[data-theme="dark"] {
+:root[data-theme="dark"],
+[data-theme="dark"], html.dark {
   --el-color-primary: #409eff;
+  --el-text-color-primary: #ffffff;
   --el-color-primary-light-9: #1d1e1f;
   
   --el-text-color-primary: #e5eaf3;
@@ -75,10 +81,12 @@
   --el-text-color-placeholder: #8d9095;
   
   --el-bg-color: #1d1e1f;
-  --el-bg-color-page: #0a0a0a;
+  --el-bg-color-page: #0b141d;
+  --el-bg-color-block: #15222e;
+  --el-bg-color-block-head: #2b4155;
   --el-bg-color-overlay: #1d1e1f;
   
-  --el-border-color: #4c4d4f;
+  --el-border-color: #2b4155;
   --el-border-color-light: #515253;
   --el-border-color-lighter: #565758;
   --el-border-color-extra-light: #5c5c5d;

package/src/utils/index.js

@@ -1,3 +1,4 @@
+import EchartsUtil from '../components/ex-chart/utils'
 // 默认配置
 const defaultConfig = {
     theme: 'white',
@@ -44,7 +45,7 @@ export const setConfig = function(config) {
 }
 
 
-// 设置主题
+// 设置主题 并更新图表主题
 export const setTheme = function(theme) {
     const validThemes = ['white', 'dark']
     if (!validThemes.includes(theme)) {
@@ -59,9 +60,13 @@ export const setTheme = function(theme) {
     if (theme === 'dark') {
       root.setAttribute('data-theme', 'dark')
     } else {
-      root.removeAttribute('data-theme')
+      root.setAttribute('data-theme', theme)
     }
     
+    // 更新图表主题
+    EchartsUtil.changeAllTheme(currentConfig.theme, currentConfig.size)
+    console.log('更新图表主题')
+    
     emitConfigChange('theme', theme)
 }
 
@@ -75,6 +80,10 @@ export const setSize = function(size) {
     
     currentConfig.size = size
     document.documentElement.setAttribute('data-size', size)
+    // 更新图表主题
+    EchartsUtil.changeAllTheme(currentConfig.theme, currentConfig.size)
+    console.log('更新图表字体')
+
     emitConfigChange('size', size)
 }
 

package/src/components/xt-upload/index.js

@@ -1,2 +0,0 @@
-import XtUpload from './index.vue'
-export default XtUpload