Dev

App.uvue

@@ -1,4 +1,4 @@
-<script lang="uts">
+<script lang="uts">
 	let firstBackTime = 0
 	export default {
 		onLaunch: function () {
@@ -35,19 +35,15 @@
 </script>
 
 <style lang="scss">
-	/*每个页面公共css */
-	@import '@/uni_modules/uni-scss/index.scss';
-	page {
-		background-color: $uni-bg-color-grey;
-	}
 	.page {
 		background-color: $uni-bg-color-grey;
-	}
-	.uni-row {
-		flex-direction: row;
-	}
+	}
 
-	.uni-column {
-		flex-direction: column;
-	}
+	// .uni-row {
+	// 	flex-direction: row;
+	// }
+
+	// .uni-column {
+	// 	flex-direction: column;
+	// }
 </style>

README.md

@@ -1,38 +1,34 @@
 ## uni-ui-x
 
+### 已支持的组件列表
 
-### uni-ui-x相比uni-ui主要的变化
+| 组件名| 组件说明	|
+| :----------------| :-----------------------------	|
+| uni-icon-x| 图标组件，暂时不支持自定义图标	|
+| uni-data-picker-x| 支持并不好，需要之后重写	|
+| uni-section-x| 支持	|
+| uni-list-x| 部分支持：uni-list-item-x	|
+| uni-card-x| 支持	|
+| uni-badge-x| 支持	|
+| uni-breadcrumb-x| 支持	|
+| uni-fab-x| 支持	|
+| uni-fav-x| 支持	|
+| uni-notice-bar-x| 支持	|
 
-uni-ui-x由于受写法限制，API支持情况等相关问题，与uni-ui有部分内容不同，但是在开发中，与uni-ui功能保持一致，以给习惯于uni-ui的开发者一致大开发体验
 
-主要的区别如下所示：
-1. **样式无法继承**
-
-  在uniappx中，样式是不会继承的，详细可见：[样式不继承](https://doc.dcloud.net.cn/uni-app-x/css/#stylenoextends)。
-
-  在uni-ui中，uni的部分组件会提供给用于继承给自组件的样式。比如，在`uni-section`标题栏中，在`right-slot`插槽处会给放入插槽的内容字体大小上的添加`font-size: 14px;`,之后类似的位置将不会有相似的修改，需要开发者自己合理调控组件的样式
-
-  因此，当涉及插槽位置的样式出现与uni-ui不一致的问题，则需要开发者自己修改传入时的样式。
-
-2. **传入的参数类型必须是确定的**
 
-  在uniappx中，由于联合类型的支持有限，传入的参数类型必须是确定的，详细可见：[联合类型](https://doc.dcloud.net.cn/uni-app-x/uts/data-type.html#union-type)
+### uni-ui-x与uni-ui的区别
 
-  在uni-ui中，部分组件会提供一种形式方便调用，比如在`uni-section`组件中，`padding`属性可以很方便的加一个边距，padding可以是`String类型`也可以是`Boolean类型`。
-
-  你可以这样调用
-
-  ```html
-  <uni-section title="默认插槽" sub-title="副标题" padding="0 0 5px 10px">默认插槽内容</uni-section>
-  ```
-
-  也可以这样调用，会默认给见10px的边距
+主要的区别如下所示：
+- 组件名称发生变化
+- 样式无法继承，注意default的slot区别较大
+- 传入的参数类型必须是确定的
+- 【重要】提供了一种全新的使用组件的方式：数据绑定式引入
+- 暂时不支持国际化
 
-  ```html
-  <uni-section title="默认插槽" sub-title="副标题" padding>默认插槽内容</uni-section>
-  ```
+更详细的说明见：[uni-ui-x相比uni-ui主要的变化](./doc/DIFFERENCE.md)
 
-  但是在uni-ui-x中，须根据文档所给出的类型传入对应的类型
 
-3. 
+### 当前存在的问题
 
+- 类型名称`UniListItemXExtraIcon`是否太长了，需要缩减

build/node.js

@@ -0,0 +1,59 @@
+#!/usr/bin/env node
+
+// Required parameters:
+// @raycast.schemaVersion 1
+// @raycast.title node
+// @raycast.mode compact
+
+// Optional parameters:
+// @raycast.icon 🤖
+
+// Documentation:
+// @raycast.author yuhe
+
+
+const fs = require('fs');
+const path = require('path');
+const { execSync } = require('child_process');
+
+const UIX_MODULES = "/Users/gaoruicheng/Documents/HBuilderProjects/uni-ui-x/uni_modules";
+const UIX_UNIAPP_MODULES = "/Users/gaoruicheng/Documents/HBuilderProjects/uni-ui-x-uniapp/uni_modules";
+
+// 递归创建目录
+const mkdirSyncRecursive = (dir) => {
+  if (fs.existsSync(dir)) {
+    return;
+  }
+  mkdirSyncRecursive(path.dirname(dir));
+  fs.mkdirSync(dir);
+};
+
+// 递归查找并复制文件
+const copyFilesRecursive = (sourceDir, targetDir) => {
+  const items = fs.readdirSync(sourceDir);
+  items.forEach(item => {
+    const sourcePath = path.join(sourceDir, item);
+    const targetPath = path.join(targetDir, item);
+    const stat = fs.statSync(sourcePath);
+    if (stat.isDirectory()) {
+      mkdirSyncRecursive(targetPath);
+      copyFilesRecursive(sourcePath, targetPath);
+    } else {
+      fs.copyFileSync(sourcePath, targetPath);
+      // console.log(`已将 ${sourcePath} 复制到 ${targetPath}`);
+    }
+  });
+};
+
+// 删除目标目录中的内容（如果存在）
+if (fs.existsSync(UIX_UNIAPP_MODULES)) {
+  fs.rmSync(UIX_UNIAPP_MODULES, { recursive: true, force: true });
+}
+
+// 创建目标目录
+mkdirSyncRecursive(UIX_UNIAPP_MODULES);
+
+// 复制文件
+copyFilesRecursive(UIX_MODULES, UIX_UNIAPP_MODULES);
+
+console.log(`已将 ${UIX_MODULES} 中的所有文件复制到 ${UIX_UNIAPP_MODULES} 中。`);

build/sync-pages.js

@@ -0,0 +1,62 @@
+#!/usr/bin/env node
+
+const fs = require('fs');
+const path = require('path');
+
+const UIX_UVUE = "/Users/gaoruicheng/Documents/HBuilderProjects/uni-ui-x/pages";
+const UIX_UNIAPP_VUE = "/Users/gaoruicheng/Documents/HBuilderProjects/uni-ui-x-uniapp/pages";
+const UIX_UVUE_PAGE = "/Users/gaoruicheng/Documents/HBuilderProjects/uni-ui-x/pages.json";
+const UIX_UNIAPP_VUE_PAGE = "/Users/gaoruicheng/Documents/HBuilderProjects/uni-ui-x-uniapp/pages.json";
+
+// 递归创建目录
+const mkdirRecursive = (dir) => {
+  if (fs.existsSync(dir)) {
+    return;
+  }
+  mkdirRecursive(path.dirname(dir));
+  fs.mkdirSync(dir);
+};
+
+// 递归查找并处理文件
+const processFilesRecursive = (sourceDir, targetDir) => {
+  const items = fs.readdirSync(sourceDir);
+  items.forEach(item => {
+    const sourcePath = path.join(sourceDir, item);
+    let targetPath = path.join(targetDir, item);
+    const stat = fs.statSync(sourcePath);
+    if (stat.isDirectory()) {
+      mkdirRecursive(targetPath);
+      processFilesRecursive(sourcePath, targetPath);
+    } else {
+      if (sourcePath.endsWith('.uvue')) {
+        // 修改 .uvue 文件内容并改名为 .vue
+        const content = fs.readFileSync(sourcePath, 'utf8');
+        const modifiedContent = content.replace(/<script>/g, '<script lang="uts">');
+        targetPath = targetPath.replace(/\.uvue$/, '.vue');
+        fs.writeFileSync(targetPath, modifiedContent, 'utf8');
+        // console.log(`已将 ${sourcePath} 文件中的 <script> 标签修改为 <script lang="uts"> 并保存到 ${targetPath}。`);
+      } else {
+        // 复制其它类型的文件
+        fs.copyFileSync(sourcePath, targetPath);
+        // console.log(`已将 ${sourcePath} 复制到 ${targetPath}`);
+      }
+    }
+  });
+};
+
+// 删除目标目录中的内容（如果存在）
+if (fs.existsSync(UIX_UNIAPP_VUE)) {
+  fs.rmSync(UIX_UNIAPP_VUE, { recursive: true, force: true });
+}
+
+// 创建目标目录
+mkdirRecursive(UIX_UNIAPP_VUE);
+
+// 处理文件
+processFilesRecursive(UIX_UVUE, UIX_UNIAPP_VUE);
+
+console.log(`已将 ${UIX_UVUE} 中的所有文件处理并复制到 ${UIX_UNIAPP_VUE} 中。`);
+
+// 复制 pages.json 文件
+fs.copyFileSync(UIX_UVUE_PAGE, UIX_UNIAPP_VUE_PAGE);
+console.log(`已将 ${UIX_UVUE_PAGE} 复制到 ${UIX_UNIAPP_VUE_PAGE}`);

build/sync-uni_modules.js

@@ -0,0 +1,46 @@
+#!/usr/bin/env node
+
+const fs = require('fs');
+const path = require('path');
+
+const UIX_MODULES = "/Users/gaoruicheng/Documents/HBuilderProjects/uni-ui-x/uni_modules";
+const UIX_UNIAPP_MODULES = "/Users/gaoruicheng/Documents/HBuilderProjects/uni-ui-x-uniapp/uni_modules";
+
+// 递归创建目录
+const mkdirRecursive = (dir) => {
+  if (fs.existsSync(dir)) {
+    return;
+  }
+  mkdirRecursive(path.dirname(dir));
+  fs.mkdirSync(dir);
+};
+
+// 递归查找并复制文件
+const copyFilesRecursive = (sourceDir, targetDir) => {
+  const items = fs.readdirSync(sourceDir);
+  items.forEach(item => {
+    const sourcePath = path.join(sourceDir, item);
+    const targetPath = path.join(targetDir, item);
+    const stat = fs.statSync(sourcePath);
+    if (stat.isDirectory()) {
+      mkdirRecursive(targetPath);
+      copyFilesRecursive(sourcePath, targetPath);
+    } else {
+      fs.copyFileSync(sourcePath, targetPath);
+      // console.log(`已将 ${sourcePath} 复制到 ${targetPath}`);
+    }
+  });
+};
+
+// 删除目标目录中的内容（如果存在）
+if (fs.existsSync(UIX_UNIAPP_MODULES)) {
+  fs.rmSync(UIX_UNIAPP_MODULES, { recursive: true, force: true });
+}
+
+// 创建目标目录
+mkdirRecursive(UIX_UNIAPP_MODULES);
+
+// 复制文件
+copyFilesRecursive(UIX_MODULES, UIX_UNIAPP_MODULES);
+
+console.log(`已将 ${UIX_MODULES} 中的所有文件复制到 ${UIX_UNIAPP_MODULES} 中。`);

doc/DIFFERENCE.md

@@ -0,0 +1,122 @@
+## uni-ui-x相比uni-ui主要的变化
+uni-ui-x由于受写法限制，API支持情况等相关问题，与uni-ui有部分内容不同，但是在开发中，与uni-ui功能保持一致，以给习惯于uni-ui的开发者一致大开发体验。
+
+### 1. 名称发生变化
+
+在uni-ui-x中，组件的名称都是已-x结尾，例如：`uni-list-x`
+
+
+### 2. 样式无法继承，注意default处的slot区别较大
+
+在uniappx中，样式是不会继承的，详细可见：[样式不继承](https://doc.dcloud.net.cn/uni-app-x/css/#stylenoextends)。
+
+在uni-ui中，uni的部分组件会提供给继承给插槽的属性。
+
+- 在`uni-section`标题栏中，在`right-slot`插槽处会给放入插槽的内容字体大小上的添加`font-size: 14px;`。
+- 在`uni-card`中，默认插槽在uni-ui中会默认给文字添加一个`#3a3a3a`的颜色，但是在uni-ui-x中不会继承这个颜色
+
+在uni-ui-x中类似的位置将不会有相似的修改，需要开发者自己控制插槽样式。
+
+当前存在这种问题的组件：
+- section
+- list-item
+- breadcrumb
+
+### 3.传入的参数类型必须是确定的
+
+在uniappx中，由于联合类型的支持有限，传入的参数类型必须是确定的，详细可见：[联合类型](https://doc.dcloud.net.cn/uni-app-x/uts/data-type.html#union-type)
+
+在uni-ui中，部分组件会提供一种形式方便调用，比如在`uni-section`组件中，`padding`属性可以很方便的加一个边距，padding可以是`String类型`也可以是`Boolean类型`。
+
+调用法1：
+
+```html
+<uni-section title="默认插槽" sub-title="副标题" padding="0 0 5px 10px">默认插槽内容</uni-section>
+```
+
+调用法2：
+
+  ```html
+  <uni-section title="默认插槽" sub-title="副标题" padding>默认插槽内容</uni-section>
+  ```
+但是在uni-ui-x中，须根据文档所给出的类型传入对应的类型，只能是调用法1
+
+
+
+再比如可以传入字符串`"10"`或者数字10，在uni-ui-x中对类型做了严格的定义，需要传入10
+
+
+
+### 4.【重要】提供了一种全新的使用组件的方式：数据绑定式引入
+
+> 受全局引入type的限制，目前需要手动引入type
+
+在过去，通常通过如下的方式（模版内联声明）引入组件：
+
+```vue
+<uni-list-x>
+	<uni-list-item-x thumb="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png" thumbSize="lg"
+	title="列表标题" note="列表描述信息" rightText="右侧文字" showArrow ></uni-list-item-x>
+</uni-list-x>
+
+<!-- 或者是如下方式 -->
+
+<uni-list-item-x :thumb="uix.thumb" :thumbSize="uix.thumbSize" :title="uix.title" :note="uix.note" :rightText="uix.rightText" showArrow ></uni-list-item-x>
+<script>
+	export default {
+		data() {
+			return {
+				uix: {
+					title: "列表标题",
+					note: "列表描述信息",
+					rightText: "右侧文字",
+					thumbSize: "lg",
+					thumb: "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png",
+					showArrow: true
+				} as UniListItemX
+			}
+		}
+	}
+</script>
+
+```
+
+在uix中，提供了一种新的方式（数据绑定式）来引入组件，即通过props中的uix节点来引入，如下所示：
+
+```vue
+<template>
+	<uni-list-x>
+			<uni-list-item-x :uix="uix"></uni-list-item-x>
+		</uni-list-x>
+</template>
+
+<script>
+	import { UniListItemX } from '@/uni_modules/uni-types-x/index.uts';
+	export default {
+		data() {
+			return {
+				uix: {
+					title: "列表标题",
+					note: "列表描述信息",
+					rightText: "右侧文字",
+					thumbSize: "lg",
+					thumb: "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png",
+					showArrow: true
+				} as UniListItemX
+			}
+		}
+	}
+</script>
+```
+
+注：UniListItemX是`<uni-list-item-x >` 的props中的所有type
+
+
+
+通过这种方式可以：
+
+- 使得代码更加简洁
+- 配合HbuilderX的type注释，可以在使用时即可看到类型和作用
+- 在uni-ui-x中，即支持第一种调用方式，也支持第二种方式，这两种方式是兼容的
+  - 两种方式具有相同的类型和相同的默认值
+  - 在显示时，优先选择uix节点的内容，如果uix节点的内容找不到，再找props上的内容，如果props上也找不到，那么就会返回默认值