Merge pull request #203 from baiy/feature/ipv6

IP网络计算器支持 IPv6
baiy · Jan 30, 2023 · a6e7dec · a6e7dec
2 parents c282006 + 8158121
commit a6e7dec
Show file tree

Hide file tree

Showing 29 changed files with 413 additions and 127 deletions.
diff --git a/packages/ctool-config/src/config.ts b/packages/ctool-config/src/config.ts
@@ -189,7 +189,7 @@ export let _tools = {
         keywords: []
     },
     ipcalc: {
-        feature: ['ipcalc'],
+        feature: ['ipv4','ipv6'],
         parent_directory: "",
         keywords: []
     },

diff --git a/packages/ctool-core/package.json b/packages/ctool-core/package.json
@@ -47,6 +47,7 @@
         "ext-list": "^4.0.0",
         "fast-xml-parser": "^4.0.13",
         "hexy": "^0.3.4",
+        "ip6": "^0.2.10",
         "istextorbinary": "^6.0.0",
         "jmespath": "^0.16.0",
         "js-base64": "^3.7.4",

diff --git a/packages/ctool-core/src/components/HelpTip.vue b/packages/ctool-core/src/components/HelpTip.vue
@@ -1,17 +1,29 @@
 <template>
     <Tooltip :content="text">
-        <slot><Icon @click="click" hover name="question" /></slot>
+        <slot>
+            <Icon @click="click" hover :name="icon" :size="iconSize"/>
+        </slot>
     </Tooltip>
 </template>
 
 <script setup lang="ts">
 import {openUrl} from "@/helper/helper"
+import {PropType} from "vue";
+import {IconType} from "@/helper/icon"
 
 const props = defineProps({
     link: {
         type: String,
         default: ""
     },
+    icon: {
+        type: String as PropType<IconType>,
+        default: "question"
+    },
+    iconSize: {
+        type: [String, Number],
+        default: 14
+    },
     text: {
         type: String,
         default: () => {

diff --git a/packages/ctool-core/src/components/serialize/SerializeOutput.vue b/packages/ctool-core/src/components/serialize/SerializeOutput.vue
@@ -1,6 +1,6 @@
 <template>
-    <Display position="top-right" toggle>
-        <Display position="bottom-right" :style="style" toggle>
+    <Display position="top-right" toggle :style="style" class="ctool-serialize-output" :class="disabledBorder ? ['ctool-serialize-output-disabled-border'] : []">
+        <Display position="bottom-right" style="height: 100%" toggle>
             <Textarea
                 v-if="['http_query_string','csv'].includes(current.type)"
                 :model-value="result"
@@ -20,20 +20,29 @@
                 <template v-if="current.type === 'xml'">
                     <Input size="small" v-model="current.option.xml.attribute_prefix" :width="180" :label="$t(`component_serialize_xml_attribute_prefix`)"/>
                 </template>
+                <template v-if="current.type === 'text'">
+                    <Align>
+                        <Bool size="small" border v-model="current.option.text.is_add_quote" :label="$t('component_serialize_text_add_quote')"/>
+                        <Input size="small" v-model="current.option.text.delimiter" :width="120" :label="$t('component_serialize_text_delimiter')"/>
+                    </Align>
+                </template>
             </template>
         </Display>
         <template #extra>
-            <Select
-                :size="'small'"
-                v-model="current.type"
-                v-if="typeLists.length > 1"
-                :options="typeLists.map((item)=>{
+            <Align>
+                <Select
+                    :size="'small'"
+                    v-model="current.type"
+                    v-if="typeLists.length > 1"
+                    :options="typeLists.map((item)=>{
                     return {
                         value:item,
                         label:getDisplayName(item)
                     }
                 })"
-            />
+                />
+                <slot/>
+            </Align>
         </template>
     </Display>
 </template>
@@ -62,9 +71,13 @@ const props = defineProps({
             return $t("main_ui_output")
         }
     },
+    disabledBorder: {
+        type: Boolean,
+        default: false
+    },
     allow: {
         type: Array as PropType<SerializeOutputEncoderType[]>,
-        default: () => serializeOutputEncoderLists
+        default: () => serializeOutputEncoderLists.filter(item => !['text'].includes(item))
     },
     content: {
         type: Object as PropType<Serialize>,
@@ -138,6 +151,9 @@ watch(() => {
             case "toml":
                 r = data.toToml()
                 break
+            case "text":
+                r = data.toText(option.text)
+                break
             case "properties":
                 r = data.toProperties()
                 break
@@ -161,3 +177,8 @@ const style = $computed(() => {
     return css
 })
 </script>
+<style>
+.ctool-serialize-output-disabled-border .ctool-code-editor .cm-editor {
+    border-width: 0px
+}
+</style>
diff --git a/packages/ctool-core/src/components/serialize/output.ts b/packages/ctool-core/src/components/serialize/output.ts
@@ -2,8 +2,13 @@ import {HistorySerializable, SerializeOutputEncoderType, OutputBase} from "@/typ
 import {has, isEmpty, merge} from "lodash";
 
 type Option = {
+    text: {
+        delimiter: string,
+        is_add_quote: boolean
+    },
     csv: {
-        quoted: boolean, header: boolean
+        quoted: boolean,
+        header: boolean
     },
     html_table: {
         header: boolean
@@ -14,6 +19,10 @@ type Option = {
 }
 
 const defaultOption: Option = {
+    text: {
+        delimiter: ",\\n",
+        is_add_quote: false
+    },
     csv: {
         quoted: false,
         header: true

diff --git a/packages/ctool-core/src/components/type.d.ts b/packages/ctool-core/src/components/type.d.ts
@@ -253,10 +253,14 @@ declare module '@vue/runtime-core' {
                 modelValue: SerializeOutput,
                 height?: number | string,
                 placeholder?: string,
+                disabledBorder?: boolean,
                 allow?: SerializeOutputEncoderType[]
                 content: ComponentType<Serialize>,
             },
-            $emit: (e: "success") => void
+            $emit: (e: "success") => void,
+            $slots: {
+                default: () => VNode[]
+            }
         }
         Editor: new () => {
             $props: {
@@ -294,6 +298,8 @@ declare module '@vue/runtime-core' {
         HelpTip: new () => {
             $props: {
                 link?: string,
+                icon?: IconType,
+                iconSize?: number | string,
                 text?: string,
             }
             $emit: (e: "click") => void

diff --git a/packages/ctool-core/src/components/ui/Bool.vue b/packages/ctool-core/src/components/ui/Bool.vue
@@ -90,12 +90,14 @@ const checked = $computed({
     cursor: pointer;
     font-size: calc(1rem * var(--font-size));
     color: var(--color);
+
 }
 
 .ctool-bool[data-border="y"] {
     border: 1px solid var(--ctool-border-color);
     padding: 0 calc(.8rem * var(--font-size));
     border-radius: var(--border-radius);
+    background-color: var(--ctool-background-color);
 }
 
 .ctool-bool[data-border="y"][data-checked="y"]:not([data-disabled="y"]), .ctool-bool[data-border="y"]:hover {

diff --git a/packages/ctool-core/src/components/ui/Card.vue b/packages/ctool-core/src/components/ui/Card.vue
@@ -53,7 +53,7 @@ const style = $computed(() => {
 }
 
 .ctool-card-header {
-    padding: 0 10px;
+    padding: 0 5px 0 10px;
     background-color: var(--ctool-block-title-bg-color);
     border-bottom: 1px solid var(--ctool-border-color);
     display: flex;

diff --git a/packages/ctool-core/src/components/ui/Input.vue b/packages/ctool-core/src/components/ui/Input.vue
@@ -13,12 +13,12 @@
         </div>
         <div class="ctool-input-right" ref="inputRight">
             <template v-if="$slots.suffix || $slots.append">
-                <div class="ctool-input-append" v-if="$slots.append">
-                    <slot name="append"></slot>
-                </div>
                 <div class="ctool-input-suffix" v-if="$slots.suffix">
                     <slot name="suffix"></slot>
                 </div>
+                <div class="ctool-input-append" v-if="$slots.append">
+                    <slot name="append"></slot>
+                </div>
             </template>
         </div>
     </div>

diff --git a/packages/ctool-core/src/helper/serialize/index.ts b/packages/ctool-core/src/helper/serialize/index.ts
@@ -9,7 +9,7 @@ import phpArray from "./phpArray"
 import toml from "@ltd/j-toml"
 import xml from "./xml"
 import phpSerialize from "./phpSerialize"
-import {isEmpty, isObject} from "lodash";
+import {isEmpty, isObject, isArray} from "lodash";
 import Json from "@/helper/json"
 
 type  ContentType = any[] | { [key: string]: any } | [] | {}
@@ -130,6 +130,19 @@ class Serialize<T extends ContentType = ContentType> {
         return csv.stringify(this.content(), {quoted, header})
     }
 
+    toText({delimiter = ",\\n", is_add_quote = false}: Option = {}) {
+        if (this.isEmpty()) {
+            return "";
+        }
+        const content = this.content()
+        if (!isArray(content)) {
+            throw new Error("Content Only Support Array")
+        }
+        return content.map(item => {
+            return is_add_quote ? `"${item}"` : item
+        }).join(delimiter.replace(/\\n/g, "\n"));
+    }
+
     toTable({header = true}: Option = {}) {
         return table.stringify(this.content(), {header})
     }

diff --git a/packages/ctool-core/src/i18n/locales/en/component.i18n.json5 b/packages/ctool-core/src/i18n/locales/en/component.i18n.json5
@@ -36,6 +36,8 @@
     "serialize_csv_quoted": "Quoted",
     "serialize_csv_table_header": "Header",
     "serialize_xml_attribute_prefix": "Attribute Prefix",
+    "serialize_text_add_quote": "Delimiter",
+    "serialize_text_delimiter": "Add Quote",
     // editor
     "editor_line_wrapping": "Line Wrapping",
     "editor_line_number": "Show Line Number",

diff --git a/packages/ctool-core/src/i18n/locales/en/tool.i18n.json5 b/packages/ctool-core/src/i18n/locales/en/tool.i18n.json5
@@ -72,6 +72,8 @@
     "arm_hexToArm": "HEX to ARM",
     "bcrypt": "Bcrypt",
     "ipcalc": "Ipcalc",
+    "ipcalc_ipv4": "IPv4",
+    "ipcalc_ipv6": "IPv6",
     "sqlFillParameter": 'Fill SQL Parameters',
     "httpSnippet": 'Http Request Code',
     "dataValidation": 'BCC/CRC/LRC',

diff --git a/packages/ctool-core/src/i18n/locales/zh_CN/component.i18n.json5 b/packages/ctool-core/src/i18n/locales/zh_CN/component.i18n.json5
@@ -36,16 +36,16 @@
     "serialize_csv_quoted": "引号",
     "serialize_csv_table_header": "表头",
     "serialize_xml_attribute_prefix": "属性前缀",
+    "serialize_text_add_quote": "添加引号",
+    "serialize_text_delimiter": "分隔符",
     // 编辑器
     "editor_line_wrapping": "自动换行",
     "editor_line_number": "显示行号",
     "editor_multiple": "列选择模式",
     "editor_goto": "代码定位",
     "editor_search": "查找/替换",
-
     // help tip
     "click_help": "点击查看说明文档",
-
     // display
     "display_fold_option": "折叠选项",
     "display_expand_option": "展开选项"

diff --git a/packages/ctool-core/src/i18n/locales/zh_CN/tool.i18n.json5 b/packages/ctool-core/src/i18n/locales/zh_CN/tool.i18n.json5
@@ -79,6 +79,8 @@
     "arm_hexToArm": "HEX to ARM",
     "bcrypt": "Bcrypt",
     "ipcalc": "IP网络计算器",
+    "ipcalc_ipv4": "IPv4",
+    "ipcalc_ipv6": "IPv6",
     "sqlFillParameter": 'SQL参数填充',
     "httpSnippet": 'Http请求代码',
     "dataValidation": 'BCC/CRC/LRC',