Merge from main

sheepzh · sheepzh · commit 928067f0a81c · 2022-06-20T23:50:39.000+08:00
diff --git a/package.json b/package.json
@@ -13,47 +13,47 @@
   "author": "zhy",
   "license": "MIT",
   "devDependencies": {
-    "@jest/types": "^28.0.2",
-    "@types/chrome": "0.0.183",
+    "@jest/types": "^28.1.1",
+    "@types/chrome": "0.0.190",
     "@types/copy-webpack-plugin": "^8.0.1",
     "@types/echarts": "^4.9.15",
     "@types/generate-json-webpack-plugin": "^0.3.4",
-    "@types/jest": "^27.5.0",
-    "@types/node": "^17.0.31",
+    "@types/jest": "^28.1.2",
+    "@types/node": "^18.0.0",
     "@types/psl": "^1.1.0",
     "@types/webpack": "^5.28.0",
     "@types/webpack-bundle-analyzer": "^4.4.1",
     "babel-loader": "^8.2.5",
-    "copy-webpack-plugin": "^10.2.4",
+    "copy-webpack-plugin": "^11.0.0",
     "css-loader": "^6.7.1",
-    "eslint": "^8.14.0",
-    "filemanager-webpack-plugin": "^6.1.7",
+    "eslint": "^8.18.0",
+    "filemanager-webpack-plugin": "^7.0.0",
     "generate-json-webpack-plugin": "^2.0.0",
-    "jest": "^28.0.3",
-    "jest-environment-jsdom": "^28.0.2",
-    "mini-css-extract-plugin": "^2.6.0",
+    "jest": "^28.1.1",
+    "jest-environment-jsdom": "^28.1.1",
+    "mini-css-extract-plugin": "^2.6.1",
     "node-sass": "^7.0.1",
-    "sass-loader": "^12.6.0",
+    "sass-loader": "^13.0.0",
     "style-loader": "^3.3.1",
-    "ts-jest": "^28.0.0",
+    "ts-jest": "^28.0.5",
     "ts-loader": "^9.3.0",
-    "ts-node": "^10.7.0",
+    "ts-node": "^10.8.1",
     "tslib": "^2.4.0",
-    "typescript": "4.6.4",
+    "typescript": "4.7.4",
     "url-loader": "^4.1.1",
-    "webpack": "^5.72.0",
+    "webpack": "^5.73.0",
     "webpack-bundle-analyzer": "^4.5.0",
-    "webpack-cli": "^4.9.2"
+    "webpack-cli": "^4.10.0"
   },
   "dependencies": {
-    "@element-plus/icons-vue": "^1.1.4",
+    "@element-plus/icons-vue": "^2.0.4",
     "axios": "^0.27.2",
     "clipboardy": "^3.0.0",
     "countup.js": "^2.2.0",
-    "echarts": "^5.3.2",
-    "element-plus": "1.2.0-beta.6",
+    "echarts": "^5.3.3",
+    "element-plus": "2.2.6",
     "psl": "^1.8.0",
-    "vue": "^3.2.33",
-    "vue-router": "^4.0.14"
+    "vue": "^3.2.37",
+    "vue-router": "^4.0.16"
   }
 }
diff --git a/src/app/components/common/date-range-filter-item.ts b/src/app/components/common/date-range-filter-item.ts
@@ -26,6 +26,7 @@ const _default = defineComponent({
     setup(props, ctx) {
         // @ts-ignore
         const dateRange: Ref<Date[]> = ref(props.defaultRange || [undefined, undefined])
+        // @ts-ignore
         return () => h('span', { class: 'filter-item' }, h(ElDatePicker,
             {
                 modelValue: dateRange.value,
diff --git a/src/app/components/common/editable-tag.sass b/src/app/components/common/editable-tag.sass
@@ -6,8 +6,19 @@
  */
 
 .el-tag
+    height: 32px
     margin-right: 10px
 
+.editable-tag-container
+    // offset right margin from the rightmost child 
+    margin-right: -10px
+    display: flex
+    flex-flow: row wrap
+    justify-content: space-between
+    .item-input-container,.item-add-button
+        // The last line left 
+        margin-right: auto
+
 .item-cancel-button
     border-right: 0.5px
     border-radius: 0
@@ -17,24 +28,23 @@
     margin-left: 0px !important
     margin-right: 10px
 .item-check-button,.item-cancel-button,.item-add-button
-    height: 30px
+    height: 32px
     line-height: 30px
 .item-add-button
     padding: 0 15px
 .item-check-button,.item-cancel-button
     padding: 0 10px
 
-.input-new-tag
-    width: 140px
-    input
-        height: 32px
-
 .item-input-container
-    display: inline-block
+    display: inline-flex
+    .el-input__wrapper
+        height: 30px
+        width: 140px
 
 .editable-item
     margin-bottom: 9px
     line-height: 32px !important
+    display: inline-flex
 
     .edit-icon
         height: 14px
diff --git a/src/app/components/common/popup-confirm-button.ts b/src/app/components/common/popup-confirm-button.ts
@@ -36,7 +36,7 @@ const _default = defineComponent({
             onConfirm: () => ctx.emit("confirm")
         }, {
             reference: () => h(ElButton, {
-                size: "mini",
+                size: 'small',
                 type: props.buttonType,
                 icon: props.buttonIcon,
                 style: {
diff --git a/src/app/components/common/switch-filter-item.ts b/src/app/components/common/switch-filter-item.ts
@@ -21,7 +21,7 @@ const _default = defineComponent({
     emits: ["change"],
     setup(props, ctx) {
         const modelValue: Ref<boolean> = ref(props.defaultValue)
-        return () => h("span", {}, [
+        return () => h("span", { class: "filter-switch" }, [
             h('a', { class: 'filter-name' }, props.label),
             h(ElSwitch, {
                 class: 'filter-item',
diff --git a/src/app/components/dashboard/feedback.ts b/src/app/components/dashboard/feedback.ts
@@ -28,7 +28,7 @@ const _default = defineComponent({
         effect: Effect.LIGHT,
     }, () => h(ElButton, {
         type: "info",
-        size: "mini",
+        size: 'small',
         icon: Headset,
         round: true,
         onClick: () => chrome.tabs.create({
diff --git a/src/app/components/data-manage/clear/filter/date-filter.ts b/src/app/components/data-manage/clear/filter/date-filter.ts
@@ -37,10 +37,11 @@ const pickerShortcuts = [
     datePickerShortcut('till30DaysAgo', 30)
 ]
 
+// @ts-ignore
 const picker = ({ dateRangeRef }: DateFilterProps) => h(ElDatePicker, {
     modelValue: dateRangeRef.value,
     "onUpdate:modelValue": (date: Array<Date>) => dateRangeRef.value = date,
-    size: 'mini',
+    size: 'small',
     style: 'width:250px;',
     startPlaceholder: '1994/12/15',
     format: "YYYY/MM/DD",
diff --git a/src/app/components/data-manage/clear/filter/number-filter.ts b/src/app/components/data-manage/clear/filter/number-filter.ts
@@ -17,7 +17,7 @@ const elInput = (valRef: Ref<string>, placeholder: string, min?: Ref<string>) =>
         placeholder: placeholder,
         min: min !== undefined ? min.value || '0' : undefined,
         clearable: true,
-        size: 'mini',
+        size: 'small',
         modelValue: valRef.value,
         onInput: (val: string) => valRef.value = val.trim(),
         onClear: () => valRef.value = ''
diff --git a/src/app/components/data-manage/clear/filter/operation-button.ts b/src/app/components/data-manage/clear/filter/operation-button.ts
@@ -139,7 +139,7 @@ const button = (props: _Props) => h(ElButton,
     {
         icon: props.button.icon,
         type: props.button.type,
-        size: 'mini',
+        size: 'small',
         onClick: () => handleClick(props)
     },
     () => t(msg => msg.item.operation[props.button.message])
diff --git a/src/app/components/limit/table/column/operation.ts b/src/app/components/limit/table/column/operation.ts
@@ -26,7 +26,7 @@ const _default = defineComponent({
             default: ({ row }: { row: TimeLimitItem }) => [
                 h(ElButton, {
                     type: 'danger',
-                    size: 'mini',
+                    size: 'small',
                     icon: Delete,
                     onClick() {
                         const { cond } = row
diff --git a/src/app/components/limit/table/index.ts b/src/app/components/limit/table/index.ts
@@ -24,7 +24,7 @@ const _default = defineComponent({
     setup(props, ctx) {
         return () => h(ElTable, {
             border: true,
-            size: 'mini',
+            size: 'small',
             style: { width: '100%' },
             highlightCurrentRow: true,
             fit: true,
diff --git a/src/app/components/option/common.ts b/src/app/components/option/common.ts
@@ -21,7 +21,7 @@ import { OptionMessage } from "@app/locale/components/option"
 export function renderOptionItem(input: VNode | { [key: string]: VNode }, label: (msg: OptionMessage) => string, defaultValue: string | number) {
     const param = isVNode(input) ? { input } : input
     const labelArcher = h('a', { class: 'option-label' }, tN(msg => label(msg.option), param))
-    const defaultTag = h(ElTag, { size: 'mini' }, () => defaultValue)
+    const defaultTag = h(ElTag, { size: 'small' }, () => defaultValue)
     const defaultArcher = h('a', { class: 'option-default' }, tN(msg => msg.option.defaultValue, { default: defaultTag }))
     return h('div', { class: 'option-line' }, [labelArcher, defaultArcher])
 }
diff --git a/src/app/components/option/components/appearance/dark-mode-input.ts b/src/app/components/option/components/appearance/dark-mode-input.ts
@@ -54,7 +54,7 @@ const _default = defineComponent({
         return () => {
             const result = [h(ElSelect, {
                 modelValue: darkMode.value,
-                size: 'mini',
+                size: 'small',
                 style: { width: '120px' },
                 onChange: async (newVal: string) => {
                     const before = darkMode.value
@@ -70,7 +70,7 @@ const _default = defineComponent({
                 result.push(
                     h(ElTimePicker, {
                         modelValue: start.value,
-                        size: "mini",
+                        size: "small",
                         style: { width: "150px" },
                         "onUpdate:modelValue": (newVal) => {
                             start.value = newVal
@@ -81,7 +81,7 @@ const _default = defineComponent({
                     h('a', { style: { marginLeft: "9px" } }, '-'),
                     h(ElTimePicker, {
                         modelValue: end.value,
-                        size: "mini",
+                        size: "small",
                         style: { width: "150px" },
                         "onUpdate:modelValue": (newVal) => {
                             end.value = newVal
diff --git a/src/app/components/option/components/appearance/index.ts b/src/app/components/option/components/appearance/index.ts
@@ -49,7 +49,7 @@ const allLocaleOptions: Timer.LocaleOption[] = ["default", ...allLocales]
 
 const locale = (option: Ref<Timer.AppearanceOption>) => h(ElSelect, {
     modelValue: option.value.locale,
-    size: 'mini',
+    size: 'small',
     style: { width: '120px' },
     onChange: async (newVal: Timer.LocaleOption) => {
         option.value.locale = newVal
diff --git a/src/app/components/option/components/popup.ts b/src/app/components/option/components/popup.ts
@@ -16,7 +16,7 @@ import { ALL_POPUP_DURATION } from "@util/constant/popup"
 
 const popupMaxInput = (option: Ref<Timer.PopupOption>) => h(ElInputNumber, {
     modelValue: option.value.popupMax,
-    size: 'mini',
+    size: 'small',
     min: 5,
     max: 30,
     onChange: (val: number) => {
@@ -28,7 +28,7 @@ const popupMaxInput = (option: Ref<Timer.PopupOption>) => h(ElInputNumber, {
 const typeOptions = () => ALL_DATA_ITEMS.map(item => h(ElOption, { value: item, label: t(msg => msg.item[item]) }))
 const typeSelect = (option: Ref<Timer.PopupOption>) => h(ElSelect, {
     modelValue: option.value.defaultType,
-    size: 'mini',
+    size: 'small',
     style: { width: '120px' },
     onChange: (val: Timer.DataDimension) => {
         option.value.defaultType = val
@@ -39,7 +39,7 @@ const typeSelect = (option: Ref<Timer.PopupOption>) => h(ElSelect, {
 const durationOptions = () => ALL_POPUP_DURATION.map(item => h(ElOption, { value: item, label: t(msg => msg.option.popup.duration[item]) }))
 const durationSelect = (option: Ref<Timer.PopupOption>) => h(ElSelect, {
     modelValue: option.value.defaultDuration,
-    size: 'mini',
+    size: 'small',
     style: { width: t(msg => msg.option.popup.durationWidth) },
     onChange: (val: Timer.PopupDuration) => {
         option.value.defaultDuration = val
diff --git a/src/app/components/option/style/index.sass b/src/app/components/option/style/index.sass
@@ -25,10 +25,16 @@
     .option-line
         height: 30px
         line-height: 30px
+        .el-input--small
+            height: 28px
+            .el-input__wrapper
+                height: 26px
         .option-label
             float: left
         .option-default
             float: right
+            .el-tag
+                height: 20px
 .option-container>span
     margin: 20px
     padding-left: 20px
diff --git a/src/app/components/report/filter/download-file.ts b/src/app/components/report/filter/download-file.ts
@@ -19,7 +19,7 @@ const _default = defineComponent({
     setup(_, ctx) {
         return () => h(ElDropdown, { class: 'export-dropdown', showTimeout: 100 }, {
             default: () => h(ElButton,
-                { size: 'mini', class: 'export-dropdown-button' },
+                { size: 'small', class: 'export-dropdown-button' },
                 () => h(ElIcon, { size: 17, style: { padding: '0 1px' } }, () => h(Download))
             ),
             dropdown: () => h(ElDropdownMenu, {},
diff --git a/src/app/components/report/filter/index.ts b/src/app/components/report/filter/index.ts
@@ -120,11 +120,12 @@ const _default = defineComponent({
                 }
             }),
             // Float right
-            h("div", { style: { float: "right" } }, [
+            h("div", { class: "filter-item-right-group" }, [
                 h(ElButton, {
                     class: "batch-delete-button",
                     disabled: mergeHost.value,
-                    type: "text",
+                    type: "primary",
+                    link: true,
                     icon: DeleteFilled,
                     onClick: () => ctx.emit("batchDelete", computeOption())
                 }, () => batchDeleteButtonText),
diff --git a/src/app/components/report/styles/element.sass b/src/app/components/report/styles/element.sass
@@ -10,13 +10,16 @@
 
 .batch-delete-button
     margin-right: 20px
+    height: 41px !important
+    margin-top: 2px
 
 .export-dropdown
 
     &-menu-icon
         font-size: 16px
 
     &-button
+        width: 30px
         padding: 7px !important
         margin-top: 8px
 
diff --git a/src/app/components/report/table/columns/alias-info.ts b/src/app/components/report/table/columns/alias-info.ts
@@ -21,7 +21,7 @@ type _Emits = "change"
 
 function renderEditing(data: _Data, ctx: SetupContext<_Emits[]>) {
     return h(ElInput, {
-        size: "mini",
+        size: 'small',
         ref: data.input,
         modelValue: data.inputVal.value,
         onInput: (newVal: string) => data.inputVal.value = newVal?.trimStart(),
@@ -60,7 +60,6 @@ function renderText(data: _Data) {
         style: { paddingRight: "4px" }
     }, data.inputVal.value))
     result.push(h(ElIcon, {
-        size: 17,
         class: "edit-btn"
     }, () => h(Edit, {
         onClick: () => {
diff --git a/src/app/components/report/table/columns/operation.ts b/src/app/components/report/table/columns/operation.ts
@@ -67,7 +67,7 @@ const _default = defineComponent({
                 // Trend
                 h(ElButton, {
                     icon: Stopwatch,
-                    size: 'mini',
+                    size: 'small',
                     type: 'primary',
                     onClick() {
                         const query: LocationQueryRaw = {
diff --git a/src/app/components/report/table/index.ts b/src/app/components/report/table/index.ts
@@ -51,7 +51,7 @@ const _default = defineComponent({
         return () => h(ElTable, {
             data: props.data,
             border: true,
-            size: 'mini',
+            size: 'small',
             defaultSort: props.defaultSort,
             style: { width: '100%' },
             highlightCurrentRow: true,
diff --git a/src/app/components/rule-merge/item-list.ts b/src/app/components/rule-merge/item-list.ts
@@ -102,7 +102,7 @@ const itemList = () => {
         onSaved: (origin, merged) => handleInputConfirm(origin, merged, addButtonRef)
     })
     result.push(addButton)
-    return result
+    return h('div', { class: 'editable-tag-container' }, result)
 }
 
 export default itemList
diff --git a/src/app/components/site-manage/table/column/operation.ts b/src/app/components/site-manage/table/column/operation.ts
@@ -23,7 +23,7 @@ const deleteButton = (ctx: SetupContext<_Emit[]>, row: HostAliasInfo) => h(Popup
 
 const modifyButtonText = t(msg => msg.siteManage.button.modify)
 const modifyButton = (ctx: SetupContext<_Emit[]>, row: HostAliasInfo) => h(ElButton, {
-    size: 'mini',
+    size: 'small',
     type: "primary",
     icon: Edit,
     onClick: () => ctx.emit("modify", row)
diff --git a/src/app/components/site-manage/table/column/source.ts b/src/app/components/site-manage/table/column/source.ts
@@ -17,7 +17,7 @@ const SOURCE_DESC: { [source in HostAliasSource]: string } = {
 
 function renderSource(source: HostAliasSource) {
     const type = source === HostAliasSource.USER ? '' : 'info'
-    return h(ElTag, { type, size: 'mini' }, () => SOURCE_DESC[source])
+    return h(ElTag, { type, size: 'small' }, () => SOURCE_DESC[source])
 }
 
 const _default = defineComponent({
diff --git a/src/app/components/site-manage/table/index.ts b/src/app/components/site-manage/table/index.ts
diff --git a/src/app/components/whitelist/item-list.ts b/src/app/components/whitelist/item-list.ts
diff --git a/src/app/element-ui/icon.ts b/src/app/element-ui/icon.ts
diff --git a/src/app/index.ts b/src/app/index.ts
diff --git a/src/app/layout/menu.ts b/src/app/layout/menu.ts
diff --git a/src/app/styles/compatible.sass b/src/app/styles/compatible.sass
diff --git a/src/app/styles/index.sass b/src/app/styles/index.sass

Original file line number	Diff line number	Diff line change
`@@ -26,6 +26,7 @@ const _default = defineComponent({`
`26`	`26`	`setup(props, ctx) {`
`27`	`27`	`// @ts-ignore`
`28`	`28`	`const dateRange: Ref<Date[]> = ref(props.defaultRange \|\| [undefined, undefined])`
	`29`	`+ // @ts-ignore`
`29`	`30`	`return () => h('span', { class: 'filter-item' }, h(ElDatePicker,`
`30`	`31`	`{`
`31`	`32`	`modelValue: dateRange.value,`
Original file line number	Diff line number	Diff line change
`@@ -139,7 +139,7 @@ const button = (props: _Props) => h(ElButton,`
`139`	`139`	`{`
`140`	`140`	`icon: props.button.icon,`
`141`	`141`	`type: props.button.type,`
`142`		`- size: 'mini',`
	`142`	`+ size: 'small',`
`143`	`143`	`onClick: () => handleClick(props)`
`144`	`144`	`},`
`145`	`145`	`() => t(msg => msg.item.operation[props.button.message])`