소스 검색

代码高亮组件

haojianlong 4 년 전
부모
커밋
88b880c6de

+ 71 - 0
docs/.vuepress/components/GitCode.vue

@@ -0,0 +1,71 @@
+<template>
+    <pre>
+        <code class="typescript" v-html="code"></code>
+    </pre>
+</template>
+
+<script>
+    import axios from "axios"
+    export default {
+        name: "GitCode",
+        props:{
+            project: {
+                type: String,
+                default: '/web/persagy-web'
+            },
+            raw: {
+                type: String,
+                default: '/raw/master'
+            },
+            fileUrl: {
+                type: String,
+                default: '/persagy-web-big/src/items/SIconTextItem.ts '
+            },
+            type: {
+                type: String,
+                default: 'js'
+            }
+        },
+        data(){
+            return{
+                baseUrl: '/git',
+                username: 'lbsl',
+                password: '20200829',
+                code:''
+            }
+        },
+        created() {
+            this.init()
+        },
+        computed:{
+          requestUrl(){
+              return this.baseUrl + this.project + this.raw + this.fileUrl;
+          }
+        },
+        methods: {
+            init(){
+                axios({
+                    method: "get",
+                    url: this.requestUrl,
+                    headers: {
+                        'Authorization': "Basic " + btoa(this.username + ":" + this.password)
+                    }
+                }).then(res => {
+                    import("prismjs/prism").then(Prism => {
+                        this.Prism = Prism;
+                        console.log(this.Prism.languages);
+                        this.code = this.Prism.highlight(
+                            res.data,//想要高亮的内容
+                            this.Prism.languages[this.type],
+                            this.type
+                        );
+                    });
+                })
+            }
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>

+ 15 - 2
docs/.vuepress/config.js

@@ -71,10 +71,11 @@ module.exports = {
                     {
                         text: "引擎",
                         items: [
+                            {text: "数据格式", link: "/guides/format/floorMap.md"},
                             {text: "图形引擎", link: "/guides/engine/"},
                             {text: "场景管理", link: "/guides/scene/"},
                             {text: "楼层平面图", link: "/guides/big/"},
-                            {text: "系统图", link: "/guides/system-diagram/"},
+                            // {text: "系统图", link: "/guides/system-diagram/"},
                             {text: "编辑器", link: "/guides/edit/"}
                         ]
                     },
@@ -106,4 +107,16 @@ module.exports = {
             loader: 'less-loader', // compiles Less to CSS
         }, ],
     },
-};
+    devServer :{
+        proxy: {
+            '/git': {
+                target: 'http://39.106.8.246:3003',
+                changeOrigin: true,
+                secure: false,
+                pathRewrite: {
+                    '^/git': '',
+                },
+            }
+        }
+    }
+};

+ 0 - 35
docs/guides/big/style.md

@@ -1,35 +0,0 @@
-# 底图风格
-
-::: details 目录
-[[toc]]
-:::
-
-``` json
-{
-    "default":{
-        "Stroke": "SColor",
-        "Fill": "SColor | Gradient",
-        "LineWidth": "number",
-        "Effect": {}
-    },
-    "Selected": {
-        "Stroke": "SColor",
-        "Fill": "SColor | Gradient",
-        "LineWidth": "number",
-        "Effect": {}
-    },
-    "Disabled": {
-        "Stroke": "SColor",
-        "Fill": "SColor | Gradient",
-        "LineWidth": "number",
-        "Effect": {}
-    },
-}
-```
-
-| enabled | selected | 状态 |
-|:--:|:--:|:--:|
-| false | false | Disabled |
-| false | true | Disabled |
-| true | false | Default |
-| true | true | Selected |

+ 1 - 3
docs/guides/engine/gradient.md

@@ -10,14 +10,12 @@
 
 ![渐变结构](./img/jianbianjiegou.png)
 
-::: tip 以下示例均基于 GradRect 绘制
+::: tip 以下示例均基于 GradRect item 绘制
 
 ::: details 查看代码
 <<< @/docs/.vuepress/components/engine/gradient/GradRect.ts
 :::
 
-:::
-
 ## 线性渐变
 
 定义从上到下的渐变,作为矩形的填充样式:

docs/guides/big/format/floorMap.md → docs/guides/format/floorMap.md


+ 57 - 0
docs/guides/format/style.md

@@ -0,0 +1,57 @@
+# 底图风格
+
+::: details 目录
+[[toc]]
+:::
+
+## 基本数据格式
+
+``` json
+{
+    "default":{
+        "Stroke": "SColor",
+        "Fill": "SColor | Gradient",
+        "LineWidth": "number",
+        "Effect": {}
+    },
+    "Selected": {
+        "Stroke": "SColor",
+        "Fill": "SColor | Gradient",
+        "LineWidth": "number",
+        "Effect": {}
+    },
+    "Disabled": {
+        "Stroke": "SColor",
+        "Fill": "SColor | Gradient",
+        "LineWidth": "number",
+        "Effect": {}
+    },
+}
+```
+
+## 数据格式定义,使用及扩展
+1.以上数据内容只描写了框架中 item 已经支持的默认状态, 选中状态, 禁用状态及其对应的风格
+
+2.如果需要其他状态的风格, 则需要在 item 中添加对应状态, 并在绘制时确定 item 当前处于何种状态, 同时风格数据中增加对应的状态及风格
+
+3.<font face="黑体" color="red"> Stroke </font> 为线条颜色, 其值为16进制的颜色字符串, 目前只支持6位和8位颜色字符串, 该字符串的生成方式,
+  调用引擎中``` SColor ```类型中 toVal() 方法可生成6位16进制颜色; 调用 value 属性可得到8位16进制颜色
+  
+4.<font face="黑体" color="red"> Fill </font> 为渐变时, 其值为描述渐变的字符串,如
+    ```'SLinearGradient{0,0;0,1000;0,#ff483bff;0.5,#04ff00ff;1,#3d4effff;}'```
+    ```'SRadialGradient{500,500,50;500,500,500;0,#ff483bff;0.5,#04ff00ff;1,#3d4effff;}' ```该字符串生成方式, 调用``` SGradient ```类型的 value() 方法即可生成;格式严格遵循示例,尽量不要手动拼接;
+  <br /><font face="黑体" color="red"> Fill </font> 为普通颜色时, 其值与 <font face="黑体" color="red"> Stroke </font> 一致
+  
+5.<font face="黑体" color="red"> LineWidth </font> 为线条宽度, 数字类型
+
+6.详情使用方式,参阅 [场景管理- item 示例-矩形](../scene/items/rect.md)
+
+
+## 基本状态与item属性对应关系
+
+| enabled | selected | 状态 |
+|:--:|:--:|:--:|
+| false | false | Disabled |
+| false | true | Disabled |
+| true | false | Default |
+| true | true | Selected |

docs/guides/big/format/systemJson.md → docs/guides/format/systemJson.md


+ 14 - 14
docs/guides/index.js

@@ -4,6 +4,14 @@ const content = [
         path: '/guides/'
     },
     {
+        title: "数据格式",
+        children: [
+            ["/guides/format/floorMap", "底图数据格式"],
+            ["/guides/format/systemJson", "系统图数据格式"],
+            ["/guides/format/style", "底图风格格式"],
+        ]
+    },
+    {
         title: "绘图引擎",
         path: "/guides/engine/",
         children: [
@@ -63,26 +71,18 @@ const content = [
             },
             ["/guides/big/workLine", "工作流程"],
             ["/guides/big/downloadFile", "手工下载楼层底图文件"],
-            {
-                title: "数据格式",
-                children: [
-                    ["/guides/big/format/floorMap", "底图数据格式"],
-                    ["/guides/big/format/systemJson", "系统图数据格式"],
-                ]
-            },
-            ["/guides/big/style", "底图风格"],
             ["/guides/big/layerOrder", "图层"],
             ["/guides/big/factory/itemFactory", "item 创建工厂"],
             ["/guides/big/divide", "划分"],
             ["/guides/big/mapDemo", "楼层平面图范例"],
         ]
     },
-    {
-        title: "系统图",
-        children: [
-            ["/guides/system-diagram/json-file", "json数据格式"]
-        ]
-    },
+    // {
+    //     title: "系统图",
+    //     children: [
+    //         ["/guides/system-diagram/json-file", "json数据格式"]
+    //     ]
+    // },
     {
         title: "编辑器",
         path: "/guides/edit/",

+ 4 - 1
package.json

@@ -16,12 +16,15 @@
     "@persagy-web/big": "2.2.1",
     "@persagy-web/draw": "2.2.3",
     "@persagy-web/graph": "2.2.4",
-    "vue": "^2.6.10",
+    "axios": "^0.19.2",
     "element-ui": "^2.12.0",
+    "prismjs": "^1.21.0",
+    "vue": "^2.6.10",
     "vue-property-decorator": "^8.4.2"
   },
   "devDependencies": {
     "@vuepress/plugin-back-to-top": "^1.2.0",
+    "highlight": "^0.2.4",
     "less": "^3.12.2",
     "less-loader": "^6.2.0",
     "node-ssh": "^6.0.0",