@netang/quasar 0.0.20

package/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "@netang/quasar",
+  "version": "0.0.20",
+  "description": "netang-quasar",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/netangsoft/netang-quasar.git"
+  },
+  "keywords": [
+    "netang-quasar"
+  ],
+  "author": "Netang",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/netangsoft/netang-quasar/issues"
+  },
+  "homepage": "https://github.com/netangsoft/netang-quasar#readme"
+}

package/sass/common.scss

@@ -0,0 +1,165 @@
+/**
+ * 亮色
+ */
+.body--light {
+    // 反色
+    --n-reverse-color: var(--q-dark);
+    // 反色 rgb(亮色是黑色)
+    --n-reverse-color-rgb: 0, 0, 0;
+    // 主题颜色
+    --n-mode-color: #ffffff;;
+    // 占位符颜色
+    --n-placeholder-color: rgba(0, 0, 0, 0.5);
+}
+
+/**
+ * 暗色
+ */
+.body--dark {
+    // 反色
+    --n-reverse-color: #ffffff;
+    // 反色 rgb(暗色是白色)
+    --n-reverse-color-rgb: 255, 255, 255;
+    // 主题颜色
+    --n-mode-color: var(--q-dark);
+    // 占位符颜色
+    --n-placeholder-color: rgba(255, 255, 255, 0.5);
+}
+
+body {
+    --n-bg-grey-1: rgba(var(--n-reverse-color-rgb), 0.02);
+    --n-bg-grey-2: rgba(var(--n-reverse-color-rgb), 0.04);
+    --n-bg-grey-3: rgba(var(--n-reverse-color-rgb), 0.07);
+    --n-bg-grey-4: rgba(var(--n-reverse-color-rgb), 0.12);
+    --n-bg-grey-5: rgba(var(--n-reverse-color-rgb), 0.26);
+    --n-bg-grey-6: rgba(var(--n-reverse-color-rgb), 0.38);
+    --n-bg-grey-7: rgba(var(--n-reverse-color-rgb), 0.54);
+    --n-bg-grey-8: rgba(var(--n-reverse-color-rgb), 0.62);
+    --n-bg-grey-9: rgba(var(--n-reverse-color-rgb), 0.75);
+    --n-bg-grey-10: rgba(var(--n-reverse-color-rgb), 0.86);
+
+    overflow: hidden;
+}
+
+// 字体大小 12 像素
+.n-font-size-12 {
+    font-size: 12px;
+}
+// 字体大小 13 像素
+.n-font-size-13 {
+    font-size: 13px;
+}
+// 字体大小 14 像素
+.n-font-size-14 {
+    font-size: 14px;
+}
+// 字体大小 15 像素
+.n-font-size-15 {
+    font-size: 15px;
+}
+// 字体大小 16 像素
+.n-font-size-16 {
+    font-size: 16px;
+}
+
+// 占位符
+.n-placeholder {
+    color: var(--n-placeholder-color);
+}
+
+.n-pointer-none {
+    pointer-events: none;
+}
+
+//.n-color-primary,
+//.n-color-main {
+//    color: var(--q-primary);
+//}
+//.n-color-success {
+//    color: var(--q-positive);
+//}
+//.n-color-warning {
+//    color: var(--q-warning);
+//}
+//.n-color-danger {
+//    color: var(--q-negative);
+//}
+//.n-color-info {
+//    color: var(--q-info);
+//}
+
+// flex 1
+.n-flex-1 {
+    flex: 1;
+}
+
+// 网格行填充
+.n-col-space {
+    width: 100%;
+    padding: 0;
+    margin: 0;
+}
+
+.n-bg-grey-1 {
+    background-color: var(--n-bg-grey-1)
+}
+.n-bg-grey-2 {
+    background-color: var(--n-bg-grey-2)
+}
+.n-bg-grey-3 {
+    background-color: var(--n-bg-grey-3)
+}
+.n-bg-grey-4 {
+    background-color: var(--n-bg-grey-4)
+}
+.n-bg-grey-5 {
+    background-color: var(--n-bg-grey-5)
+}
+.n-bg-grey-6 {
+    background-color: var(--n-bg-grey-6)
+}
+.n-bg-grey-7 {
+    background-color: var(--n-bg-grey-7)
+}
+.n-bg-grey-8 {
+    background-color: var(--n-bg-grey-8)
+}
+.n-bg-grey-9 {
+    background-color: var(--n-bg-grey-9)
+}
+.n-bg-grey-10 {
+    background-color: var(--n-bg-grey-10)
+}
+
+/**
+ * 桌面
+ */
+body.desktop {
+    ::-webkit-scrollbar {
+        height: 10px;
+        width: 10px;
+        overflow: visible;
+    }
+    ::-webkit-scrollbar-button {
+        height: 0;
+        width: 0;
+    }
+    ::-webkit-scrollbar-corner {
+        background: transparent;
+    }
+    ::-webkit-scrollbar-thumb,
+    ::-webkit-scrollbar-track {
+        border-radius: 0;
+        border: none;
+        background-clip: padding-box;
+    }
+
+    ::-webkit-scrollbar-thumb,
+    ::-webkit-scrollbar-track,
+    ::-webkit-scrollbar-thumb:hover {
+        background-color: rgba(var(--n-reverse-color-rgb), 0.2);
+    }
+    ::-webkit-scrollbar-track {
+        background-color: rgba(var(--n-reverse-color-rgb), 0.05);
+    }
+}

package/sass/index.scss

@@ -0,0 +1,14 @@
+@import "~quasar/dist/quasar.sass";
+
+@import "quasar/common";
+@import "quasar/btn";
+@import "quasar/dialog";
+@import "quasar/drawer";
+@import "quasar/field";
+@import "quasar/loading";
+@import "quasar/menu";
+@import "quasar/table";
+@import "quasar/toolbar";
+
+@import "common";
+@import "line";

package/sass/line.scss

@@ -0,0 +1,39 @@
+/**
+ * 极细线
+ */
+.n-line {
+    border: 1px solid $separator-color;
+    &--top {
+        border-top: 1px solid $separator-color;
+    }
+    &--right {
+        border-right: 1px solid $separator-color;
+    }
+    &--bottom {
+        border-bottom: 1px solid $separator-color;
+    }
+    &--left {
+        border-left: 1px solid $separator-color;
+    }
+}
+
+/**
+ * 暗色
+ */
+.body--dark {
+    .n-line {
+        border-color: $separator-dark-color;
+        &--top {
+            border-top-color: $separator-dark-color;
+        }
+        &--right {
+            border-right-color: $separator-dark-color;
+        }
+        &--bottom {
+            border-bottom-color: $separator-dark-color;
+        }
+        &--left {
+            border-left-color: $separator-dark-color;
+        }
+    }
+}

package/sass/quasar/btn.scss

@@ -0,0 +1,46 @@
+/**
+ * 按钮
+ */
+.q-btn {
+    &.disabled {
+        opacity: 0.5 !important;
+    }
+
+    // 线条默认按钮
+    &--outline {
+        &.text-default {
+            &:before {
+                border-color: rgba(var(--n-reverse-color-rgb), 0.2);
+            }
+        }
+    }
+}
+
+.n-button {
+    // 带图标的按钮
+    &-icon {
+        .q-icon {
+            font-size: 1.315em;
+        }
+        .on-left {
+            margin-right: 5px;
+        }
+        .on-right {
+            margin-left: 5px;
+        }
+    }
+}
+
+
+
+// 亮色
+.body--light {
+    .q-btn {
+        // 线条默认按钮
+        &--outline {
+            &.text-default {
+                background: #ffffff !important;
+            }
+        }
+    }
+}

package/sass/quasar/common.scss

@@ -0,0 +1,3 @@
+.q-page-container {
+    position: relative;
+}

package/sass/quasar/dialog.scss

@@ -0,0 +1,7 @@
+/**
+ * 对话框
+ */
+.n-dialog {
+
+}
+

package/sass/quasar/drawer.scss

@@ -0,0 +1,6 @@
+/**
+ * 布局侧滑菜单
+ */
+.q-drawer__opener {
+    display: none !important;
+}

package/sass/quasar/field.scss

@@ -0,0 +1,210 @@
+/**
+ * 输入框
+ */
+.q-field {
+    &--outlined {
+        .q-field__control {
+            // 输入框边框颜色
+            &:after {
+                border-width: 1px !important;
+            }
+
+            // 输入框边框颜色
+            &:before {
+                border-color: rgba(var(--n-reverse-color-rgb), 0.15) !important;
+            }
+        }
+
+        // 输入框激活后高亮
+        &.q-field--highlighted {
+            // 输入框激活后高亮边框宽度
+            .q-field__control:after {
+                border-width: 1px !important;
+            }
+
+            // 输入框触碰边框颜色
+            &:hover:before {
+                border-color: rgba(var(--n-reverse-color-rgb), 0.4) !important;
+            }
+        }
+    }
+
+    &--labeled {
+        &.q-field--float {
+            .q-field__native,
+            .q-field__input {
+                &::-webkit-input-placeholder {
+                    color: var(--n-placeholder-color) !important;
+                }
+                &::-moz-placeholder {
+                    color: var(--n-placeholder-color) !important;
+                }
+                &::-ms-input-placeholder {
+                    color: var(--n-placeholder-color) !important;
+                }
+                &::-ms-input-placeholder {
+                    color: var(--n-placeholder-color) !important;
+                }
+                &::placeholder {
+                    color: var(--n-placeholder-color) !important;
+                }
+            }
+        }
+    }
+}
+
+/**
+ * 分组
+ */
+.n-field-group {
+    > .q-field--outlined {
+        // 非第一个子节点
+        &:not(:first-child) {
+            .q-field__control {
+                &:before {
+                    left: -1px;
+                    border-left-color: transparent !important;
+                }
+                border-top-left-radius: inherit !important;
+                border-bottom-left-radius: inherit !important;
+            }
+        }
+        // 非最后一个子节点
+        &:not(:last-child) {
+            .q-field__control {
+                border-top-right-radius: inherit !important;
+                border-bottom-right-radius: inherit !important;
+            }
+        }
+    }
+
+    > .n-field-group {
+
+        // 非第一个子节点
+        &:not(:first-child) {
+            margin-top: -1px;
+
+            .q-field--outlined {
+
+                // 第一个子节点
+                &:first-child {
+                    .q-field__control {
+                        border-top-left-radius: inherit !important;
+                    }
+                }
+
+                // 最后一个子节点
+                &:first-child {
+                    .q-field__control {
+                        border-top-right-radius: inherit !important;
+                    }
+                }
+
+                .q-field__control {
+                    &:before {
+                        border-top-color: transparent !important;
+                    }
+                }
+            }
+        }
+
+        // 非最后一个子节点
+        &:not(:last-child) {
+            .q-field--outlined {
+
+                // 第一个子节点
+                &:first-child {
+                    .q-field__control {
+                        border-bottom-left-radius: inherit !important;
+                    }
+                }
+
+                // 最后一个子节点
+                &:first-child {
+                    .q-field__control {
+                        border-bottom-right-radius: inherit !important;
+                    }
+                }
+            }
+        }
+    }
+}
+
+/**
+ * 字段集样式
+ */
+.n-field-fieldset {
+    &.q-field {
+        &--labeled {
+            .q-field__prefix,
+            .q-field__suffix {
+                padding-top: 0 !important;
+                padding-bottom: 0 !important;
+            }
+
+
+            .q-field__native {
+                padding-top: 0 !important;
+                padding-bottom: 0 !important;
+            }
+
+            .q-field__label {
+                left: -6px;
+                padding: 0 6px;
+                z-index: 1 !important;
+                border-radius: 6px;
+            }
+        }
+
+        &--float {
+            .q-field__label {
+                transform: translateY(-120%) scale(0.85) !important;
+                background-color: var(--n-mode-color) !important;
+            }
+        }
+
+        // 紧凑模式
+        &--dense {
+            &.q-field--float {
+                .q-field__label {
+                    transform: translateY(-80%) scale(0.85) !important;
+                }
+            }
+        }
+
+        .q-field__native,
+        .q-field__input {
+            z-index: 2;
+        }
+    }
+
+    &.q-field--auto-height.q-field--labeled .q-field__control-container {
+        padding-top: 4px;
+    }
+}
+
+/**
+ * 亮色
+ */
+.body--light {
+    // 输入框背景 白色
+    .n-field-fieldset {
+        &.q-field {
+            &--outlined {
+                .q-field__inner {
+                    &:before {
+                        content: "";
+                        position: absolute;
+                        top: 1px;
+                        left: 0;
+                        right: 0;
+                        bottom: 1px;
+                        border-radius: 4px;
+                        background-color: #ffffff;
+                    }
+                }
+            }
+        }
+    }
+}
+

package/sass/quasar/loading.scss

@@ -0,0 +1,6 @@
+/**
+ * 加载
+ */
+.q-inner-loading {
+    background: rgba(204, 204, 204, 0.3);
+}

package/sass/quasar/menu.scss

@@ -0,0 +1,8 @@
+/**
+ * 菜单
+ */
+.q-menu {
+    &.q-dark {
+        background-color: $color-gray-86;
+    }
+}

package/sass/quasar/table.scss

@@ -0,0 +1,112 @@
+/**
+ * 表格
+ */
+
+// 头部底部背景色
+$header-footer-bg-color: $grey-2;
+$dark-header-footer-bg-color: $color-gray-93;
+// 单元格背景色
+$td-bg-color: #ffffff;
+$dark-td-bg-color: $dark;
+
+.n-table {
+
+    // 宫格模式
+    &--grid {
+        background-color: rgba(var(--n-reverse-color-rgb), 0.1);
+    }
+
+    // 撑满
+    &.absolute-full {
+        border-radius: unset;
+
+        // 顶部吸顶
+        thead tr th {
+            position: sticky;
+            z-index: 2;
+        }
+        thead tr:first-child th {
+            top: 0;
+        }
+
+        // 最后一列固定
+        &.n-table--last-fixed {
+            // 最后一列吸顶
+            th:last-child,
+            td:last-child {
+                position: sticky;
+                right: 0;
+                z-index: 1;
+            }
+            th:last-child {
+                z-index: 2;
+            }
+        }
+    }
+}
+
+// 亮色
+.body--light {
+    .n-table {
+
+        // 头部和底部背景色
+        .q-table__top,
+        .q-table__bottom,
+        thead tr:first-child th {
+            background-color: $header-footer-bg-color;
+        }
+
+        // 撑满
+        &.absolute-full {
+            // 最后一列固定
+            &.n-table--last-fixed {
+                // 头部最后一个
+                thead tr:last-child th:last-child {
+                    background-color: $header-footer-bg-color;
+                }
+                // 内容最后一个
+                td:last-child {
+                    background-color: $td-bg-color;
+                }
+                th:last-child,
+                td:last-child {
+                    background-color: $td-bg-color;
+                    border-left: 1px solid $table-border-color;
+                }
+            }
+        }
+    }
+}
+
+// 暗色
+.body--dark {
+    .n-table {
+
+        // 头部和底部背景色
+        .q-table__top,
+        .q-table__bottom,
+        thead tr:first-child th {
+            background-color: $dark-header-footer-bg-color;
+        }
+
+        // 撑满
+        &.absolute-full {
+            // 最后一列固定
+            &.n-table--last-fixed {
+                // 头部最后一个
+                thead tr:last-child th:last-child {
+                    background-color: $dark-header-footer-bg-color;
+                }
+                // 内容最后一个
+                td:last-child {
+                    background-color: $dark-td-bg-color;
+                }
+                th:last-child,
+                td:last-child {
+                    background-color: $dark-td-bg-color;
+                    border-left: 1px solid $table-dark-border-color;
+                }
+            }
+        }
+    }
+}

package/sass/quasar/toolbar.scss

@@ -0,0 +1,22 @@
+/**
+ * 头部
+ */
+
+/**
+ * 亮色
+ */
+.body--light {
+    .n-toolbar {
+        color: $grey-8 !important;
+        background: $grey-2 !important;
+    }
+}
+
+/**
+ * 暗色
+ */
+.body--dark {
+    .n-toolbar {
+        background: var(--q-dark) !important;
+    }
+}

package/store/index.js

@@ -0,0 +1,32 @@
+import { ref } from 'vue'
+import { initAuthStore } from '../utils/useAuth'
+
+/**
+ * 公共变量
+ */
+
+// 角色数据
+export const stateRole = ref({
+    // 角色权限版本
+    v: null,
+    // all id
+    all: {},
+    // 页面
+    urls: {},
+    // 按钮
+    btns: {},
+    // 菜单
+    menus: [],
+})
+
+// 时间差
+export const stateTimeDiff = ref(0)
+
+// loading
+export const stateLoading = ref(false)
+
+// 网络是否在线
+export const stateOnLine = ref(navigator.onLine)
+
+// 管理员信息状态
+export const stateAdminUserInfo = ref(initAuthStore())