diff --git a/packages/.DS_Store b/packages/.DS_Store index 1e20d54b84ace4bf56741b84f9cfbcacab7b2665..bcea691dcd5057e7a4d0539e7351369d24462eac 100644 Binary files a/packages/.DS_Store and b/packages/.DS_Store differ diff --git a/packages/farris-theme/README.md b/packages/farris-theme/README.md index 27de50ba1e90dcdd75b71405f114e6455014cb3c..b986578936d86c86bf49e99560277522c5e98a2b 100644 --- a/packages/farris-theme/README.md +++ b/packages/farris-theme/README.md @@ -9,18 +9,24 @@ ### 1.1 部分主题界面示例 #### 1.1.1 商务风-蓝色主题 - -![blue1](/Users/ly/farris-vue/packages/farris-theme/img/blue1.png) +

+ +

#### 1.1.2 商务风-绿色主题 -![green1](/Users/ly/farris-vue/packages/farris-theme/img/green1.png) +

+ +

#### 1.1.3 拟物风-红色主题 -![red2](/Users/ly/farris-vue/packages/farris-theme/img/red2.png) +

+ +

### 1.2 主题文件生成 + #### 1.2.1 初次生成 1. 全局安装 gulp 包 : @@ -32,20 +38,32 @@ ``` npm install ``` + ``` + npm install + ``` +3. 生成默认主题: 3. 生成默认主题: ``` gulp theme ``` + ``` + gulp theme + ``` #### 1.2.2 后续生成 +#### 1.2.2 后续生成 1. 生成所有主题 在终端运行如下命令可以生成 farris 下的所有主题: ``` ./themes.sh ``` + 在终端运行如下命令可以生成 farris 下的所有主题: + ``` + ./themes.sh + ``` 2. 生成特定主题 ``` gulp theme --code 主题编码 --type 主题尺寸 @@ -59,13 +77,80 @@ packages/farris-theme/src/assets/themes/主题风格-颜色 ``` +### 1.3 新增主题 + +#### 1.3.1 新增主题以现有主题为基础 + +Farris 主题工具支持用户新增类似风格的主题,以下示例为如何以商务风绿色主题为基础,快速新增加一个主题: + +1. 修改 `packages/farris-theme/themes/setting.json`文件,在最后面追加新的主题节点。 + + 以下示例假设新增主题名称为`test-green`: + + ``` + { + "theme": "test-green", + "types": ["default", "loose"], + "dist": "src/assets/themes/test-green" + } + ``` + +2. 拷贝 `green` 文件夹,重名为新主题的名字 `test-green` + a. 修改 `test-green/base` 文件,根据具体需求调整颜色变量和尺寸变量 + b. 修改 `test-green/default` 文件中的 `extend.scss` ,调整自有样式。同时在`index.scss`文件中调整变量 + c. 修改 `test-green/loose` 文件中的 `extend.scss` ,调整自有样式。同时在`index.scss` 文件中调整变量 + +3. 执行如下命令生成该主题的紧凑版: + ``` + gulp theme --code test-green --type default + ``` + 生成文件路径为: + ``` + packages/farris-theme/src/assets/themes/test-green/default + ``` + +#### 1.3.2 新增主题不同于现有风格 + +Farris 主题工具支持用户新增不同风格的主题,以下示例为如何增加一个完全不同于现有风格的主题: + +1. 修改 `packages/farris-theme/themes/setting.json`文件,在最后面追加新的主题节点。 + + 以下示例假设新增主题名称为`test-default`: + + ``` + { + "theme": "test-default", + "types": ["default", "loose"], + "dist": "src/assets/themes/test-default" + } + ``` + +2. 拷贝 `mimicry` 文件夹,重命名为 `test-default` + a. 根据需求决定是否修改 `assets/imgs` 文件夹,调整图片资源 + b. 根据需求决定是否修改 `base/color`文件夹,调整颜色变量。保留结构`_color.scss` 作为当前文件夹的出口文件,可增加、删除、修改文件 + c. 根据需求决定是否修改 `base/extend` 文件夹,调整自有样式。保留结构`_extend.scss` 作为当前文件夹的出口文件,可增加、删除、修改文件 + d. 根据需求决定是否修改 `base/size` 文件夹,调整尺寸变量。保留结构`size.scss` 和`loose.scss` 作为紧凑尺寸和宽松尺寸的出口文件,可增加、删除、修改文件 +3. 执行如下命令生成该主题的紧凑版: + + ``` + gulp theme --code test-default --type default + ``` + + 生成文件路径为: + + ``` + packages/farris-theme/src/assets/themes/test-default/default + ``` + ## 2. 公共样式文件 ### 2.1 公共样式界面示例 当前可生成的公共样式包括:商务风-蓝色、绿色、红色主题,拟物风-蓝色、绿色、红色主题。暗黑主题将在后续迭代更新。 -![public](/Users/ly/farris-vue/packages/farris-theme/img/public.png) +

+ +

### 2.2 公共样式生成 @@ -73,13 +158,12 @@ 1. 生成默认公共样式 - 在终端输入如下命令来生成默认公共样式(即商务风下的蓝色主题公共样式): + 在终端输入如下命令来生成默认公共样式(即商务风下的蓝色主题公共样式): ``` gulp pubsite ``` - #### 2.2.2 后续生成 1. 生成所有公共样式 @@ -102,16 +186,16 @@ ``` packages/farris-theme/dist/farris-pub ``` - 双击index.html文件,可在浏览器中查看所有生成的公共样式。若某个风格下的样式还没有生成,则该风格下的色值展示将全部置灰。 + 双击 index.html 文件,可在浏览器中查看所有生成的公共样式。若某个风格下的样式还没有生成,则该风格下的色值展示将全部置灰。 重新运行如下命令,刷新页面,即可查看。 ``` ./farris-pub.sh ``` - - +## 3. 更新日志 ## 3. 更新日志 +##### v0.0.8 Date:2023-1-5--2023-1-6 ##### v0.0.8 Date:2023-1-5--2023-1-6 1. gulpfile: 修改 gulpfile 文件 @@ -120,6 +204,7 @@ b. 公共样式站点调整(暂不显示暗黑主题相关内容) c. 增加 farris-pub.sh 文件 d. 增加 公共样式文件说明文档 + d. 增加 公共样式文件说明文档 ##### v0.0.7 Date:2023-1-4