jianghu-ui 1.0.1

package/src/style/globalCSSVuetifyV4.css

@@ -0,0 +1,637 @@
+
+    /* 全局 >>>>>> */
+    body {
+        --cPrimaryColor: <$ ctx.app.config.primaryColor $>;
+        --shadow-sm: 0px 1px 2px rgba(25, 39, 52, .05), 0px 0px 4px rgba(25, 39, 52, .1);
+        --gray-900: #1F272E;
+        --gray-800: #333C44;
+    }
+
+    body {
+        font-size: 13px;
+        background: #F2F2F2 !important;
+    }
+
+    .v-application .text-h7 {
+        font-size: 1.125rem;
+    }
+
+    .flex-none {
+        flex: none;
+    }
+
+    .theme--light.v-application {
+        background: #fff !important;
+    }
+    .theme--light.v-application .login-form-card {
+        border: 1px solid #eee;
+    }
+    .v-application .align-center.text-start {
+        text-align: center !important;
+    }
+
+    body .v-application .title {
+        font-size: 1rem !important;
+    }
+    body .v-application .v-navigation-drawer .title {
+        color: var(--cPrimaryColor);
+        position: relative;
+    }
+    body .v-application .v-navigation-drawer .title::before {
+        content: '';
+        height: 14px;
+        width: 3px;
+        background: var(--cPrimaryColor);
+        position: absolute;
+        top: calc(50% - 7px);
+        left: 0;
+    }
+    
+
+    body .d-flex .v-main__wrap {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .mdi-close::before {
+        font-size: 1rem;
+    }
+
+    /* 全局 >>>>>> */
+
+
+    /* 配色 >>>>>> */
+    .v-application .theme--dark.secondary {
+        background-color: #22262e !important;
+        border-color: #22262e !important;
+    }
+
+
+    /* <<<<< 配色 */
+
+
+    /* list >>>>>> */
+    .v-list--dense .v-list-item .v-list-item__subtitle,
+    .v-list--dense .v-list-item .v-list-item__title,
+    .v-list-item--dense .v-list-item__subtitle,
+    .v-list-item--dense .v-list-item__title {
+        font-size: .8125rem !important;
+        font-weight: normal;
+    }
+
+    .v-list-item__title {
+        font-size: 13px !important;
+    }
+
+    /* <<<<< list */
+
+
+    /* 表单 >>>>>> */
+    .v-input--is-readonly .v-input__slot {
+      background: #eeeeee!important;
+    }
+    .v-label,
+    input,
+    .v-input {
+        font-size: 0.875rem !important;
+    }
+
+    body .v-text-field .v-label {
+        color: rgba(0, 0, 0, .3);
+    }
+
+    body .theme--light.v-input,
+    body .theme--light.v-input input,
+    body .theme--light.v-input textarea,
+    body .v-select.v-input--dense .v-select__selection--comma {
+        font-size: 14px !important;
+        font-weight: 500 !important;
+        color: #5E6278;
+    }
+
+    body .v-text-field--filled {
+        border-radius: 4px !important;
+    }
+
+    body .v-text-field>.v-input__control>.v-input__slot:before {
+        border: none;
+    }
+
+    body .v-text-field>.v-input__control>.v-input__slot:after {
+        border: none;
+    }
+
+    body .theme--light.v-input--is-disabled,
+    .theme--light.v-input--is-disabled input,
+    .theme--light.v-input--is-disabled textarea {
+        color: rgba(0, 0, 0, .28) !important;
+    }
+
+    body .theme--light.v-text-field--filled:not(.v-input--is-focused):not(.v-input--has-state)>.v-input__control>.v-input__slot:hover {
+        background: #EEF7ED !important;
+    }
+
+    body span.jh-input-label {
+        color: #3F4254;
+        line-height: 32px;
+        font-weight: 500;
+    }
+
+    body .v-text-field--filled.v-input--dense>.v-input__control>.v-input__slot,
+    body .v-text-field--full-width.v-input--dense>.v-input__control>.v-input__slot {
+        min-height: 40px;
+    }
+
+    body .v-text-field--filled:not(.v-text-field--single-line) input {
+        margin-top: 4px;
+    }
+
+    body .v-text-field--filled.v-input--dense.v-text-field--single-line .v-label,
+    body .v-text-field--full-width.v-input--dense.v-text-field--single-line .v-label {
+        top: 9px;
+    }
+
+    body .v-text-field--filled.v-input--dense .v-label--active,
+    body .v-text-field--full-width.v-input--dense .v-label--active {
+        transform: translateY(-16px) scale(.75);
+        background: #ffffff;
+        padding: 1px 5px;
+        border-radius: 30px;
+    }
+
+    body .v-data-table__checkbox .v-input--selection-controls__input .v-icon.mdi-checkbox-blank-outline::before {
+        content: "" !important;
+        background: #d6dde1;
+        width: 18px;
+        height: 18px;
+        border-radius: 2px;
+    }
+
+    .v-text-field.v-input--is-focused.v-input--dense:not(.v-text-field--outlined) .v-text-field__prefix {
+        color: inherit;
+    }
+
+    .v-text-field.v-input--dense:not(.v-text-field--outlined) .v-text-field__prefix {
+        color: #a5a9ab;
+    }
+
+    .v-text-field--filled.v-input--dense.v-text-field--outlined.v-text-field--filled>.v-input__control>.v-input__slot,
+    .v-text-field--filled.v-input--dense.v-text-field--outlined>.v-input__control>.v-input__slot,
+    .v-text-field--filled.v-input--dense.v-text-field--single-line>.v-input__control>.v-input__slot,
+    .v-text-field--full-width.v-input--dense.v-text-field--outlined.v-text-field--filled>.v-input__control>.v-input__slot,
+    .v-text-field--full-width.v-input--dense.v-text-field--outlined>.v-input__control>.v-input__slot,
+    .v-text-field--full-width.v-input--dense.v-text-field--single-line>.v-input__control>.v-input__slot,
+    .v-text-field--outlined.v-input--dense.v-text-field--outlined.v-text-field--filled>.v-input__control>.v-input__slot,
+    .v-text-field--outlined.v-input--dense.v-text-field--outlined>.v-input__control>.v-input__slot,
+    .v-text-field--outlined.v-input--dense.v-text-field--single-line>.v-input__control>.v-input__slot {
+        min-height: 32px;
+    }
+
+    .v-input .v-label {
+        line-height: 14px;
+        font-size: .8125rem !important;
+    }
+
+    .v-text-field--enclosed.v-input--dense:not(.v-text-field--solo).v-text-field--single-line .v-input__append-inner,
+    .v-text-field--enclosed.v-input--dense:not(.v-text-field--solo).v-text-field--single-line .v-input__append-outer,
+    .v-text-field--enclosed.v-input--dense:not(.v-text-field--solo).v-text-field--single-line .v-input__prepend-inner,
+    .v-text-field--enclosed.v-input--dense:not(.v-text-field--solo).v-text-field--single-line .v-input__prepend-outer,
+    .v-text-field--full-width.v-input--dense:not(.v-text-field--solo).v-text-field--single-line .v-input__append-inner,
+    .v-text-field--full-width.v-input--dense:not(.v-text-field--solo).v-text-field--single-line .v-input__append-outer,
+    .v-text-field--full-width.v-input--dense:not(.v-text-field--solo).v-text-field--single-line .v-input__prepend-inner,
+    .v-text-field--full-width.v-input--dense:not(.v-text-field--solo).v-text-field--single-line .v-input__prepend-outer {
+        margin-top: 5px;
+    }
+
+    body .theme--light.v-input,
+    body .theme--light.v-input input,
+    body .theme--light.v-input textarea,
+    body .v-select.v-input--dense .v-select__selection--comma {
+        font-size: .8125rem !important;
+        font-weight: normal !important;
+        color: var(--gray-900);
+    }
+
+    body .theme--light.v-text-field--filled>.v-input__control>.v-input__slot {
+        background: #Ffff;
+        border: 1px solid #DFDFDF;
+    }
+
+    body .theme--light.v-text-field--filled.v-input--is-focused>.v-input__control>.v-input__slot {
+        background: #Ffff;
+        border: 1px solid var(--cPrimaryColor) ;
+    }
+
+    body .theme--light.v-text-field--filled.v-input--is-disabled>.v-input__control>.v-input__slot {
+        background: #F2F2F2;
+        border: 1px solid #F2F2F2;
+    }
+
+    .v-select__selection--comma {
+        margin: 7px 4px;
+    }
+
+    /* <<<<< 表单 */
+
+
+    /* table >>>>>> */
+    .theme--light.v-data-table.v-data-table--fixed-header thead th {
+        background: #F6F6F6 !important;
+    }
+
+    .v-data-table__progress {
+        height: 10px !important;
+    }
+
+    .v-data-table__empty-wrapper td {
+        max-width: 80vw;
+        text-align: left;
+    }
+    .v-data-table.v-data-table--mobile>.v-data-table__wrapper>table>tbody>tr>td:first-child,
+    .v-data-table.v-data-table--mobile>.v-data-table__wrapper>table>tfoot>tr>td:first-child,
+    .v-data-table.v-data-table--mobile>.v-data-table__wrapper>table>thead>tr>th:first-child {
+        padding-left: 5px!important;
+    }
+
+    .theme--light.v-data-table>.v-data-table__wrapper>table>tbody>tr:hover:not(.v-data-table__expanded__content):not(.v-data-table__empty-wrapper) {
+        background: #fbfbfb !important;
+    }
+
+    /* 固定表头最后一个字段 */
+    table>tbody>tr>td.fixed:nth-last-child(1),
+    table>thead>tr>th.fixed:nth-last-child(1) {
+        position: sticky !important;
+        position: -webkit-sticky !important;
+        right: 0;
+        z-index: 10;
+        background: white;
+        border: none;
+        box-shadow: none;
+    }
+
+    table>thead>tr>th.fixed:nth-last-child(1) {
+        top: 0;
+    }
+
+    th {
+        white-space: nowrap;
+    }
+
+    /* table 框线 */
+    td:not(.v-picker td),
+    th:not(.v-picker th) {
+        border-bottom: thin solid rgba(0, 0, 0, .06) !important;
+        border-right: thin solid rgba(0, 0, 0, .06) !important;
+    }
+
+    table>tbody>tr>td:nth-last-child(1),
+    table>thead>tr>th:nth-last-child(1) {
+        border-right: none !important;
+    }
+
+    .theme--light.v-data-table .v-data-footer {
+        border-top: 0;
+    }
+
+    .theme--light.v-data-table.v-data-table--fixed-header thead th {
+        border-bottom: thin solid rgba(0, 0, 0, .06) !important;
+        box-shadow: none;
+    }
+
+    .v-data-table>.v-data-table__wrapper>table>tbody>tr>td,
+    .v-data-table>.v-data-table__wrapper>table>tfoot>tr>td,
+    .v-data-table>.v-data-table__wrapper>table>thead>tr>th {
+        padding: 0 8px !important;
+    }
+
+    .v-data-table>.v-data-table__wrapper>table>tbody>tr>td:first-child,
+    .v-data-table>.v-data-table__wrapper>table>tfoot>tr>td:first-child,
+    .v-data-table>.v-data-table__wrapper>table>thead>tr>th:first-child {
+        padding-left: 16px !important;
+    }
+    .v-data-table>.v-data-table__wrapper>table>tbody>tr>td.noWarp,
+    .v-data-table>.v-data-table__wrapper>table>tfoot>tr>td.noWarp {
+        white-space: nowrap !important;
+    }
+
+    .v-data-table>.v-data-table__wrapper>table>tbody>tr>td .v-icon.v-icon {
+        transform: translateY(-1px);
+    }
+
+    .theme--light.v-data-table>.v-data-table__wrapper>table>thead>tr>th {
+        color: rgba(181, 181, 195);
+        font-weight: 600;
+        font-size: 13px;
+    }
+
+    .v-data-table--fixed-header>.v-data-table__wrapper>table>thead>tr>th.fixed {
+        z-index: 12 !important;
+    }
+
+    .v-data-table--fixed-header>.v-data-table__wrapper>table>thead>tr>th {
+        z-index: 11 !important;
+    }
+
+    .v-data-table.show-select table>tbody>tr>td:nth-child(1),
+    .v-data-table.show-select table>thead>tr>th:nth-child(1) {
+        position: sticky !important;
+        position: -webkit-sticky !important;
+        left: 0;
+        z-index: 10;
+        background: white;
+    }
+
+    /* 固定表头部第一个字段 */
+    .v-data-table.show-select table>tbody>tr>td.fixed:nth-child(2),
+    .v-data-table.show-select table>thead>tr>th.fixed:nth-child(2) {
+        position: sticky !important;
+        position: -webkit-sticky !important;
+        left: 64px;
+        z-index: 10 !important;
+        border-right: 1px solid #EEEEEE;
+    }
+
+    body .theme--light.v-data-table.v-data-table--fixed-header thead th, body .theme--light.v-data-table>.v-data-table__wrapper>table>thead>tr>th {
+        background-color: #ebecf0 !important;
+    }
+
+
+    .v-data-table>.v-data-table__wrapper>table>tbody>tr>td,
+    .v-data-table>.v-data-table__wrapper>table>tfoot>tr>td,
+    .v-data-table>.v-data-table__wrapper>table>thead>tr>td {
+        min-height: 40px;
+        height: 40px;
+        color: #333C44;
+        font-size: .8125rem;
+    }
+
+    .theme--light.v-data-table>.v-data-table__wrapper>table>thead>tr>th {
+        color: #505A62 !important;
+        font-weight: normal;
+    }
+
+    /* 分组 */
+    .theme--light.v-data-table .v-row-group__header,
+    .theme--light.v-data-table .v-row-group__summary {
+        background: #F2F2F2;
+    }
+
+    .theme--light.v-data-table .v-data-footer {
+        justify-content: end;
+    }
+
+    .v-application--is-ltr .v-data-footer__select {
+        margin-left: 30px;
+    }
+
+    .v-data-table td.fixed, .v-data-table th.fixed {
+      position: unset;
+    }
+
+    /* table 斑马纹 */
+    .v-data-table.zebraLine tr:nth-child(even),
+    .v-data-table.zebraLine tr:nth-child(even) td.fixed,
+    .v-data-table.zebraLine.fixed-first-column tr:nth-child(even) td:nth-child(1) {
+        background-color: #F6F6F6;
+    }
+
+    /* table行hover背景色 */
+    .theme--light.v-data-table>.v-data-table__wrapper>table>tbody>tr:hover:not(.v-data-table__expanded__content):not(.v-data-table__empty-wrapper),
+    .theme--light.v-data-table>.v-data-table__wrapper>table>tbody>tr:hover td.fixed,
+    .theme--light.v-data-table.fixed-first-column>.v-data-table__wrapper>table>tbody>tr:hover td:nth-child(1) {
+        background: #fff !important;
+    }
+    .theme--light.v-data-table>.v-data-table__wrapper>table>tbody>tr:nth-child(even):hover:not(.v-data-table__expanded__content):not(.v-data-table__empty-wrapper),
+    .theme--light.v-data-table>.v-data-table__wrapper>table>tbody>tr:nth-child(even):hover td.fixed,
+    .theme--light.v-data-table.fixed-first-column>.v-data-table__wrapper>table>tbody>tr:nth-child(even):hover td:nth-child(1) {
+        background: #F6F6F6 !important;
+    }
+
+    /* table行选中背景色 */
+    .theme--light.v-data-table tbody tr.v-data-table__selected{
+        background: #fff !important;
+    }
+    .theme--light.v-data-table tbody tr.v-data-table__selected:nth-child(even){
+        background: #F6F6F6 !important;
+    }
+
+    /* table 定高 */
+    .jh-fixed-table-height {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .v-data-table__wrapper,
+    .fixed-table-wrapper-height .v-data-table__wrapper {
+        flex: auto;
+        border: 1px solid #E6E6E6;
+        border-bottom: none;
+    }
+
+    /* table 页脚 */
+    .v-data-footer {
+        border-top: 1px solid rgba(0, 0, 0, .06) !important;
+        margin-right: 0 !important;
+    }
+
+    /* table 分页紧凑 */
+    .v-application--is-ltr .v-data-footer__pagination {
+        margin: 0 12px 0 4px;
+    }
+
+    .v-application--is-ltr .v-data-footer__select .v-select {
+        margin: 8px 0 8px 14px;
+    }
+
+    .v-application--is-ltr .v-data-footer__select {
+        margin-right: 8px;
+        margin-left: 20px;
+    }
+
+
+
+    /* table 固定第一列 */
+    .fixed-first-column table>tbody>tr>td:nth-child(1),
+    .fixed-first-column table>thead>tr>th:nth-child(1) {
+        position: sticky !important;
+        position: -webkit-sticky !important;
+        left: 0;
+        z-index: 12 !important;
+        background: white;
+        border-right: none;
+    }
+
+    /* table 高度撑满*/
+    .table-height-full {
+        height: 100%;
+    }
+
+    /* <<<<< table */
+
+
+    /* card >>>>>> */
+    body .v-sheet.v-card:not(.v-sheet--outlined) {
+        box-shadow: 0 1px 20px 0 rgb(0 0 0 / 2%);
+    }
+
+    /* <<<<< card */
+
+
+
+    /* 弹窗 >>>>>> */
+    .v-dialog--fullscreen .v-sheet .container {
+        height: 100vh;
+        margin: 15vh 0 0 0;
+        background: #ffffff;
+        padding: 50px 0 0 0;
+        position: relative;
+    }
+
+    .v-dialog--fullscreen .v-sheet {
+        height: 100vh;
+        top: 0;
+        position: fixed;
+    }
+
+    .v-dialog--fullscreen {
+        background: rgba(0, 0, 0, 0.5);
+        top: auto !important;
+        bottom: 0;
+    }
+
+    .v-dialog--fullscreen .v-data-table {
+        overflow-y: auto;
+    }
+
+    /* <<<<< 弹窗 */
+
+
+    /* toolbar >>>>>> */
+    .v-toolbar__title {
+        overflow: visible;
+    }
+
+    .theme--light.v-app-bar.v-toolbar.v-sheet {
+        background: #ffffff !important;
+        box-shadow: 0 1px 20px 0 rgb(0 0 0 / 2%) !important;
+    }
+
+    body .v-toolbar__content {
+        padding: 0 !important;
+    }
+
+    /* <<<<< toolbar */
+
+
+    /* tab >>>>>> */
+    body .v-tab {
+        font-size: 14px !important;
+    }
+
+    .theme--light.v-tabs>.v-tabs-bar .v-tab--disabled,
+    .theme--light.v-tabs>.v-tabs-bar .v-tab:not(.v-tab--active),
+    .theme--light.v-tabs>.v-tabs-bar .v-tab:not(.v-tab--active)>.v-btn,
+    .theme--light.v-tabs>.v-tabs-bar .v-tab:not(.v-tab--active)>.v-icon {
+        color: var(--gray-900);
+    }
+
+    /* <<<<< tab */
+
+
+    /* 面包屑 >>>>>> */
+    body .v-breadcrumbs li {
+        font-size: 12px !important;
+    }
+
+    body .v-breadcrumbs li:nth-child(2n) {
+        padding: 0 6px;
+    }
+
+    /* <<<<< 面包屑 */
+
+
+    /* 菜单 >>>>>> */
+    .v-menu__content {
+        background: white;
+        box-shadow: 0 3px 14px 2px rgb(0 0 0 / 8%);
+        z-index: 300 !important;
+    }
+
+    .v-menu__content .v-list-item {
+        margin-bottom: 3px;
+        height: 32px;
+        min-height: auto;
+    }
+
+    .v-menu__content .v-list-item--link:before {
+        border-radius: 6px;
+    }
+
+    .v-menu__content .v-select-list {
+        padding: 10px;
+    }
+
+    .v-menu__content .v-icon.mdi-close {
+        font-size: 18px;
+    }
+
+    /* <<<<< 菜单 */
+
+
+    /* 抽屉 >>>>>> */
+    body .v-navigation-drawer--temporary {
+        z-index: 101 !important;
+    }
+
+    .v-navigation-drawer {
+        overflow: revert;
+    }
+
+    /* <<<<< 抽屉 */
+
+
+    /* 树形视图 >>>>>> */
+    .v-treeview--dense .v-treeview-node__root {
+        min-height: 34px;
+        margin-bottom: 3px;
+    }
+
+    .theme--light.v-treeview .v-treeview-node__root:before,
+    .theme--light.v-treeview .v-treeview-node__root:hover:before {
+        border-radius: 6px;
+    }
+
+    .v-treeview-node__label {
+        overflow: inherit;
+    }
+   
+
+    /* <<<<< 树形视图 */
+
+    /* 表单内col >>>>>> */
+    .v-form .col-12 {
+        padding-bottom: 0;
+    }
+    /* 最后一个row加padding-bottom */
+    .v-form>.row:last-child {
+        padding-bottom: 20px;
+    }
+    /* <<<<< 表单内col */
+
+    /* v-btn-toggle */
+    .theme--light.v-btn--active:before, .theme--light.v-btn--active:hover:before {
+        border-color: var(--cPrimaryColor);
+        opacity: 0;
+    }
+    .theme--light.v-btn-toggle:not(.v-btn-toggle--group) .v-btn.v-btn--active {
+        border-color: var(--cPrimaryColor)!important;
+        color: var(--cPrimaryColor)!important;
+    }
+    .v-application--is-ltr .v-btn-toggle>.v-btn.v-btn:not(:first-child), .v-application--is-rtl .v-btn-toggle>.v-btn.v-btn:not(:last-child) {
+        border-left-width: thin;
+    }
+    
+ 
+    .v-main .v-main {
+        padding: 0!important;
+    }

package/src/style/storybook.css

@@ -0,0 +1,4 @@
+.preview-page .v-application--wrap {
+    min-height: auto!important;
+    padding-bottom: 30px;
+}

package/src/tailwind.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/src/utils/vuetify.js

@@ -0,0 +1,31 @@
+// Vuetify 实例创建工具
+// 由于使用 CDN 方式引入，Vuetify 会挂载到 window.Vuetify 上
+
+export function createVuetifyInstance(options = {}) {
+  if (typeof window !== 'undefined' && window.Vuetify) {
+    return new window.Vuetify({
+      theme: {
+        themes: {
+          light: {
+            primary: '#1976D2',
+            secondary: '#424242',
+            accent: '#82B1FF',
+            error: '#FF5252',
+            info: '#2196F3',
+            success: '#4CAF50',
+            warning: '#FB8C00',
+          },
+        },
+      },
+      icons: {
+        iconfont: 'mdi',
+      },
+      ...options,
+    });
+  }
+
+  console.warn('Vuetify is not available. Make sure to include Vuetify CDN in your HTML.');
+  return null;
+}
+
+export default createVuetifyInstance;