@hlw-uni/mp-vue 2.1.59 → 2.1.60
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +388 -213
- package/dist/composables/index.d.ts +0 -8
- package/dist/composables/request/service.d.ts +2 -6
- package/dist/core/index.d.ts +1 -0
- package/dist/core/theme.d.ts +8 -0
- package/dist/index.d.ts +0 -1
- package/dist/index.js +9 -384
- package/dist/index.mjs +8 -384
- package/package.json +1 -1
- package/src/components/hlw-nav-bar/index.vue +121 -0
- package/src/components/hlw-page/index.vue +24 -120
- package/src/composables/index.ts +1 -31
- package/src/composables/request/service.ts +10 -3
- package/src/core/index.ts +1 -0
- package/src/core/theme.ts +12 -0
- package/src/env.d.ts +8 -0
- package/src/index.ts +1 -2
- package/dist/composables/theme/appearance.d.ts +0 -55
- package/dist/composables/theme/font.d.ts +0 -32
- package/dist/composables/theme/index.d.ts +0 -46
- package/dist/composables/theme/palette.d.ts +0 -37
- package/dist/composables/theme/typography.d.ts +0 -41
- package/dist/stores/theme.d.ts +0 -56
- package/src/composables/theme/README.md +0 -131
- package/src/composables/theme/appearance.ts +0 -129
- package/src/composables/theme/font.ts +0 -95
- package/src/composables/theme/index.ts +0 -89
- package/src/composables/theme/palette.ts +0 -117
- package/src/composables/theme/typography.ts +0 -90
- package/src/stores/theme.ts +0 -114
package/dist/index.mjs
CHANGED
|
@@ -4,9 +4,8 @@ var __publicField = (obj, key, value) => {
|
|
|
4
4
|
__defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
5
5
|
return value;
|
|
6
6
|
};
|
|
7
|
-
import { ref, onBeforeUpdate, onUnmounted,
|
|
7
|
+
import { ref, onBeforeUpdate, onUnmounted, createSSRApp } from "vue";
|
|
8
8
|
import { onShareAppMessage, onShareTimeline } from "@dcloudio/uni-app";
|
|
9
|
-
import { defineStore } from "pinia";
|
|
10
9
|
const cosAdapter = {
|
|
11
10
|
name: "cos",
|
|
12
11
|
/**
|
|
@@ -280,7 +279,6 @@ function useUpload() {
|
|
|
280
279
|
}
|
|
281
280
|
return { uploading, upload };
|
|
282
281
|
}
|
|
283
|
-
var define_import_meta_env_default = {};
|
|
284
282
|
class BaseService {
|
|
285
283
|
/**
|
|
286
284
|
* 发送服务请求。会自动拼接前缀与命名空间。
|
|
@@ -337,7 +335,13 @@ function ServicePrefix(value) {
|
|
|
337
335
|
};
|
|
338
336
|
}
|
|
339
337
|
function PluginService(target) {
|
|
340
|
-
target.prototype
|
|
338
|
+
Object.defineProperty(target.prototype, "servicePrefix", {
|
|
339
|
+
get() {
|
|
340
|
+
return globalThis.VITE_PLUGIN_NAME || "";
|
|
341
|
+
},
|
|
342
|
+
enumerable: true,
|
|
343
|
+
configurable: true
|
|
344
|
+
});
|
|
341
345
|
}
|
|
342
346
|
function useMsg() {
|
|
343
347
|
function toast(opts) {
|
|
@@ -963,364 +967,6 @@ function useNavigate() {
|
|
|
963
967
|
miniProgram: (appId, options) => navigate("miniprogram", appId, options)
|
|
964
968
|
};
|
|
965
969
|
}
|
|
966
|
-
const useThemeStore = defineStore(
|
|
967
|
-
"theme",
|
|
968
|
-
() => {
|
|
969
|
-
const scale = ref("normal");
|
|
970
|
-
function setScale(s) {
|
|
971
|
-
scale.value = s;
|
|
972
|
-
uni.setStorageSync(FONT_SCALE_KEY, s);
|
|
973
|
-
uni.$emit(THEME_CHANGE_EVENT);
|
|
974
|
-
}
|
|
975
|
-
const fontOptions = Object.keys(FONT_PRESETS).map((key) => ({
|
|
976
|
-
value: key,
|
|
977
|
-
label: FONT_PRESETS[key].label
|
|
978
|
-
}));
|
|
979
|
-
const primaryColor = ref(DEFAULT_THEMES[0].value);
|
|
980
|
-
const themes = DEFAULT_THEMES;
|
|
981
|
-
const activeTheme = computed(
|
|
982
|
-
() => themes.find((t) => t.value === primaryColor.value) ?? { label: "自定义", value: primaryColor.value }
|
|
983
|
-
);
|
|
984
|
-
function setTheme(color) {
|
|
985
|
-
primaryColor.value = color;
|
|
986
|
-
uni.setStorageSync(THEME_COLOR_KEY, color);
|
|
987
|
-
uni.$emit(THEME_CHANGE_EVENT);
|
|
988
|
-
}
|
|
989
|
-
const appearance = ref("auto");
|
|
990
|
-
const appearanceOptions = APPEARANCE_PRESETS;
|
|
991
|
-
const appearanceMode = computed(() => resolveAppearance(appearance.value));
|
|
992
|
-
const isDark = computed(() => appearanceMode.value === "dark");
|
|
993
|
-
function setAppearance(a) {
|
|
994
|
-
appearance.value = a;
|
|
995
|
-
uni.setStorageSync(APPEARANCE_KEY, a);
|
|
996
|
-
uni.$emit(THEME_CHANGE_EVENT);
|
|
997
|
-
}
|
|
998
|
-
return {
|
|
999
|
-
// 字体
|
|
1000
|
-
scale,
|
|
1001
|
-
fontOptions,
|
|
1002
|
-
setScale,
|
|
1003
|
-
// 主题色
|
|
1004
|
-
primaryColor,
|
|
1005
|
-
themes,
|
|
1006
|
-
activeTheme,
|
|
1007
|
-
setTheme,
|
|
1008
|
-
// 外观模式
|
|
1009
|
-
appearance,
|
|
1010
|
-
appearanceOptions,
|
|
1011
|
-
appearanceMode,
|
|
1012
|
-
isDark,
|
|
1013
|
-
setAppearance
|
|
1014
|
-
};
|
|
1015
|
-
},
|
|
1016
|
-
{ unistorage: true }
|
|
1017
|
-
);
|
|
1018
|
-
const FONT_SCALE_KEY = "hlw_font_scale";
|
|
1019
|
-
const FONT_PRESETS = {
|
|
1020
|
-
small: {
|
|
1021
|
-
label: "较小",
|
|
1022
|
-
vars: {
|
|
1023
|
-
"--font-xs": "16rpx",
|
|
1024
|
-
"--font-sm": "20rpx",
|
|
1025
|
-
"--font-base": "24rpx",
|
|
1026
|
-
"--font-md": "28rpx",
|
|
1027
|
-
"--font-lg": "32rpx",
|
|
1028
|
-
"--font-xl": "36rpx"
|
|
1029
|
-
}
|
|
1030
|
-
},
|
|
1031
|
-
compact: {
|
|
1032
|
-
label: "略小",
|
|
1033
|
-
vars: {
|
|
1034
|
-
"--font-xs": "18rpx",
|
|
1035
|
-
"--font-sm": "22rpx",
|
|
1036
|
-
"--font-base": "26rpx",
|
|
1037
|
-
"--font-md": "30rpx",
|
|
1038
|
-
"--font-lg": "34rpx",
|
|
1039
|
-
"--font-xl": "38rpx"
|
|
1040
|
-
}
|
|
1041
|
-
},
|
|
1042
|
-
normal: {
|
|
1043
|
-
label: "标准",
|
|
1044
|
-
vars: {
|
|
1045
|
-
"--font-xs": "20rpx",
|
|
1046
|
-
"--font-sm": "24rpx",
|
|
1047
|
-
"--font-base": "28rpx",
|
|
1048
|
-
"--font-md": "32rpx",
|
|
1049
|
-
"--font-lg": "36rpx",
|
|
1050
|
-
"--font-xl": "40rpx"
|
|
1051
|
-
}
|
|
1052
|
-
},
|
|
1053
|
-
medium: {
|
|
1054
|
-
label: "适中",
|
|
1055
|
-
vars: {
|
|
1056
|
-
"--font-xs": "22rpx",
|
|
1057
|
-
"--font-sm": "28rpx",
|
|
1058
|
-
"--font-base": "32rpx",
|
|
1059
|
-
"--font-md": "36rpx",
|
|
1060
|
-
"--font-lg": "42rpx",
|
|
1061
|
-
"--font-xl": "46rpx"
|
|
1062
|
-
}
|
|
1063
|
-
},
|
|
1064
|
-
large: {
|
|
1065
|
-
label: "较大",
|
|
1066
|
-
vars: {
|
|
1067
|
-
"--font-xs": "24rpx",
|
|
1068
|
-
"--font-sm": "30rpx",
|
|
1069
|
-
"--font-base": "34rpx",
|
|
1070
|
-
"--font-md": "40rpx",
|
|
1071
|
-
"--font-lg": "46rpx",
|
|
1072
|
-
"--font-xl": "52rpx"
|
|
1073
|
-
}
|
|
1074
|
-
},
|
|
1075
|
-
xlarge: {
|
|
1076
|
-
label: "超大",
|
|
1077
|
-
vars: {
|
|
1078
|
-
"--font-xs": "28rpx",
|
|
1079
|
-
"--font-sm": "36rpx",
|
|
1080
|
-
"--font-base": "42rpx",
|
|
1081
|
-
"--font-md": "48rpx",
|
|
1082
|
-
"--font-lg": "56rpx",
|
|
1083
|
-
"--font-xl": "64rpx"
|
|
1084
|
-
}
|
|
1085
|
-
},
|
|
1086
|
-
xxlarge: {
|
|
1087
|
-
label: "特大",
|
|
1088
|
-
vars: {
|
|
1089
|
-
"--font-xs": "32rpx",
|
|
1090
|
-
"--font-sm": "42rpx",
|
|
1091
|
-
"--font-base": "48rpx",
|
|
1092
|
-
"--font-md": "56rpx",
|
|
1093
|
-
"--font-lg": "64rpx",
|
|
1094
|
-
"--font-xl": "72rpx"
|
|
1095
|
-
}
|
|
1096
|
-
}
|
|
1097
|
-
};
|
|
1098
|
-
function getCurrentFontScale() {
|
|
1099
|
-
try {
|
|
1100
|
-
const v = uni.getStorageSync(FONT_SCALE_KEY);
|
|
1101
|
-
if (v === "small" || v === "compact" || v === "medium" || v === "large" || v === "xlarge" || v === "xxlarge")
|
|
1102
|
-
return v;
|
|
1103
|
-
} catch {
|
|
1104
|
-
}
|
|
1105
|
-
return "normal";
|
|
1106
|
-
}
|
|
1107
|
-
function getCurrentFontVars() {
|
|
1108
|
-
return FONT_PRESETS[getCurrentFontScale()].vars;
|
|
1109
|
-
}
|
|
1110
|
-
const THEME_COLOR_KEY = "hlw_theme_color";
|
|
1111
|
-
const THEME_SEMANTIC_COLORS = {
|
|
1112
|
-
success: "#10b981",
|
|
1113
|
-
warning: "#f59e0b",
|
|
1114
|
-
error: "#ef4444",
|
|
1115
|
-
info: "#64748b"
|
|
1116
|
-
};
|
|
1117
|
-
const DEFAULT_THEMES = [
|
|
1118
|
-
{ label: "翡翠绿", value: "#10b981" },
|
|
1119
|
-
{ label: "活力橙", value: "#f97316" },
|
|
1120
|
-
{ label: "默认蓝", value: "#3b82f6" },
|
|
1121
|
-
{ label: "玫瑰粉", value: "#f43f5e" },
|
|
1122
|
-
{ label: "紫罗兰", value: "#8b5cf6" },
|
|
1123
|
-
{ label: "青石灰", value: "#64748b" }
|
|
1124
|
-
];
|
|
1125
|
-
function getCurrentThemeColor() {
|
|
1126
|
-
try {
|
|
1127
|
-
const v = uni.getStorageSync(THEME_COLOR_KEY);
|
|
1128
|
-
if (v && typeof v === "string")
|
|
1129
|
-
return v;
|
|
1130
|
-
} catch {
|
|
1131
|
-
}
|
|
1132
|
-
return DEFAULT_THEMES[0].value;
|
|
1133
|
-
}
|
|
1134
|
-
function getCurrentThemeVars() {
|
|
1135
|
-
const color = getCurrentThemeColor();
|
|
1136
|
-
return {
|
|
1137
|
-
"--primary-color": color,
|
|
1138
|
-
"--primary-light": hexToRgba(color, 0.12),
|
|
1139
|
-
"--primary-dark": darkenHex(color),
|
|
1140
|
-
"--primary-success": THEME_SEMANTIC_COLORS.success,
|
|
1141
|
-
"--primary-success-light": hexToRgba(THEME_SEMANTIC_COLORS.success, 0.12),
|
|
1142
|
-
"--primary-success-dark": darkenHex(THEME_SEMANTIC_COLORS.success),
|
|
1143
|
-
"--primary-warning": THEME_SEMANTIC_COLORS.warning,
|
|
1144
|
-
"--primary-warning-light": hexToRgba(THEME_SEMANTIC_COLORS.warning, 0.12),
|
|
1145
|
-
"--primary-warning-dark": darkenHex(THEME_SEMANTIC_COLORS.warning),
|
|
1146
|
-
"--primary-error": THEME_SEMANTIC_COLORS.error,
|
|
1147
|
-
"--primary-error-light": hexToRgba(THEME_SEMANTIC_COLORS.error, 0.12),
|
|
1148
|
-
"--primary-error-dark": darkenHex(THEME_SEMANTIC_COLORS.error),
|
|
1149
|
-
"--primary-info": THEME_SEMANTIC_COLORS.info,
|
|
1150
|
-
"--primary-info-light": hexToRgba(THEME_SEMANTIC_COLORS.info, 0.12),
|
|
1151
|
-
"--primary-info-dark": darkenHex(THEME_SEMANTIC_COLORS.info),
|
|
1152
|
-
"--success-color": THEME_SEMANTIC_COLORS.success,
|
|
1153
|
-
"--success-light": hexToRgba(THEME_SEMANTIC_COLORS.success, 0.12),
|
|
1154
|
-
"--success-dark": darkenHex(THEME_SEMANTIC_COLORS.success),
|
|
1155
|
-
"--warning-color": THEME_SEMANTIC_COLORS.warning,
|
|
1156
|
-
"--warning-light": hexToRgba(THEME_SEMANTIC_COLORS.warning, 0.12),
|
|
1157
|
-
"--warning-dark": darkenHex(THEME_SEMANTIC_COLORS.warning),
|
|
1158
|
-
"--error-color": THEME_SEMANTIC_COLORS.error,
|
|
1159
|
-
"--error-light": hexToRgba(THEME_SEMANTIC_COLORS.error, 0.12),
|
|
1160
|
-
"--error-dark": darkenHex(THEME_SEMANTIC_COLORS.error),
|
|
1161
|
-
"--info-color": THEME_SEMANTIC_COLORS.info,
|
|
1162
|
-
"--info-light": hexToRgba(THEME_SEMANTIC_COLORS.info, 0.12),
|
|
1163
|
-
"--info-dark": darkenHex(THEME_SEMANTIC_COLORS.info)
|
|
1164
|
-
};
|
|
1165
|
-
}
|
|
1166
|
-
const HEX_RE = /^#[0-9a-fA-F]{6}$/;
|
|
1167
|
-
function parseHex(hex) {
|
|
1168
|
-
if (!HEX_RE.test(hex))
|
|
1169
|
-
throw new Error(`Invalid hex color: ${hex}`);
|
|
1170
|
-
return [
|
|
1171
|
-
parseInt(hex.slice(1, 3), 16),
|
|
1172
|
-
parseInt(hex.slice(3, 5), 16),
|
|
1173
|
-
parseInt(hex.slice(5, 7), 16)
|
|
1174
|
-
];
|
|
1175
|
-
}
|
|
1176
|
-
function hexToRgba(hex, alpha) {
|
|
1177
|
-
const [r, g, b] = parseHex(hex);
|
|
1178
|
-
return `rgba(${r},${g},${b},${alpha})`;
|
|
1179
|
-
}
|
|
1180
|
-
function darkenHex(hex, amount = 0.15) {
|
|
1181
|
-
const [r, g, b] = parseHex(hex);
|
|
1182
|
-
const darken = (value) => Math.max(0, Math.round(value * (1 - amount)));
|
|
1183
|
-
return `#${darken(r).toString(16).padStart(2, "0")}${darken(g).toString(16).padStart(2, "0")}${darken(b).toString(16).padStart(2, "0")}`;
|
|
1184
|
-
}
|
|
1185
|
-
const APPEARANCE_KEY = "hlw_appearance";
|
|
1186
|
-
const APPEARANCE_PRESETS = [
|
|
1187
|
-
{ value: "light", label: "浅色模式" },
|
|
1188
|
-
{ value: "dark", label: "深色模式" },
|
|
1189
|
-
{ value: "auto", label: "跟随系统" }
|
|
1190
|
-
];
|
|
1191
|
-
const LIGHT_VARS = {
|
|
1192
|
-
"--bg-page": "#f6f6f6",
|
|
1193
|
-
"--bg-elevated": "#ffffff",
|
|
1194
|
-
"--surface-card": "#ffffff",
|
|
1195
|
-
"--surface-card-muted": "#f8fafc",
|
|
1196
|
-
"--surface-secondary": "#f1f5f9",
|
|
1197
|
-
"--surface-tertiary": "#e2e8f0",
|
|
1198
|
-
"--text-primary": "#0f172a",
|
|
1199
|
-
"--text-secondary": "#334155",
|
|
1200
|
-
"--text-muted": "#64748b",
|
|
1201
|
-
"--text-subtle": "#94a3b8",
|
|
1202
|
-
"--text-disabled": "#cbd5e1",
|
|
1203
|
-
"--border-color": "#e2e8f0",
|
|
1204
|
-
"--border-color-light": "#f1f5f9",
|
|
1205
|
-
"--border-color-focus": "#bfdbfe",
|
|
1206
|
-
"--shadow-soft": "0 2rpx 8rpx rgba(15, 23, 42, 0.04)",
|
|
1207
|
-
"--shadow-card": "0 4rpx 16rpx rgba(15, 23, 42, 0.06)"
|
|
1208
|
-
};
|
|
1209
|
-
const DARK_VARS = {
|
|
1210
|
-
"--bg-page": "#0b1020",
|
|
1211
|
-
"--bg-elevated": "#111827",
|
|
1212
|
-
"--surface-card": "#1e293b",
|
|
1213
|
-
"--surface-card-muted": "#273549",
|
|
1214
|
-
"--surface-secondary": "#273549",
|
|
1215
|
-
"--surface-tertiary": "#334155",
|
|
1216
|
-
"--text-primary": "#f8fafc",
|
|
1217
|
-
"--text-secondary": "#cbd5e1",
|
|
1218
|
-
"--text-muted": "#94a3b8",
|
|
1219
|
-
"--text-subtle": "#64748b",
|
|
1220
|
-
"--text-disabled": "#475569",
|
|
1221
|
-
"--border-color": "#334155",
|
|
1222
|
-
"--border-color-light": "#1e293b",
|
|
1223
|
-
"--border-color-focus": "#3b82f6",
|
|
1224
|
-
"--shadow-soft": "0 2rpx 8rpx rgba(0, 0, 0, 0.3)",
|
|
1225
|
-
"--shadow-card": "0 4rpx 16rpx rgba(0, 0, 0, 0.35)"
|
|
1226
|
-
};
|
|
1227
|
-
const APPEARANCE_VAR_MAP = {
|
|
1228
|
-
light: LIGHT_VARS,
|
|
1229
|
-
dark: DARK_VARS
|
|
1230
|
-
};
|
|
1231
|
-
function getCurrentAppearance() {
|
|
1232
|
-
try {
|
|
1233
|
-
const v = uni.getStorageSync(APPEARANCE_KEY);
|
|
1234
|
-
if (v === "light" || v === "dark" || v === "auto")
|
|
1235
|
-
return v;
|
|
1236
|
-
} catch {
|
|
1237
|
-
}
|
|
1238
|
-
return "auto";
|
|
1239
|
-
}
|
|
1240
|
-
function resolveAppearance(appearance) {
|
|
1241
|
-
if (appearance === "light" || appearance === "dark")
|
|
1242
|
-
return appearance;
|
|
1243
|
-
try {
|
|
1244
|
-
const info = uni.getSystemInfoSync();
|
|
1245
|
-
if (info.theme === "dark")
|
|
1246
|
-
return "dark";
|
|
1247
|
-
} catch {
|
|
1248
|
-
}
|
|
1249
|
-
return "light";
|
|
1250
|
-
}
|
|
1251
|
-
function getCurrentAppearanceMode() {
|
|
1252
|
-
return resolveAppearance(getCurrentAppearance());
|
|
1253
|
-
}
|
|
1254
|
-
function getCurrentAppearanceVars() {
|
|
1255
|
-
return APPEARANCE_VAR_MAP[getCurrentAppearanceMode()];
|
|
1256
|
-
}
|
|
1257
|
-
const TYPOGRAPHY_ROLES = {
|
|
1258
|
-
"title-lg": {
|
|
1259
|
-
size: "var(--font-xl)",
|
|
1260
|
-
weight: "600",
|
|
1261
|
-
lineHeight: "1.2",
|
|
1262
|
-
color: "var(--text-primary)"
|
|
1263
|
-
},
|
|
1264
|
-
"title": {
|
|
1265
|
-
size: "var(--font-md)",
|
|
1266
|
-
weight: "500",
|
|
1267
|
-
lineHeight: "1.3",
|
|
1268
|
-
color: "var(--text-primary)"
|
|
1269
|
-
},
|
|
1270
|
-
"subtitle": {
|
|
1271
|
-
size: "var(--font-base)",
|
|
1272
|
-
weight: "500",
|
|
1273
|
-
lineHeight: "1.3",
|
|
1274
|
-
color: "var(--text-secondary)"
|
|
1275
|
-
},
|
|
1276
|
-
"body": {
|
|
1277
|
-
size: "var(--font-base)",
|
|
1278
|
-
weight: "400",
|
|
1279
|
-
lineHeight: "1.5",
|
|
1280
|
-
color: "var(--text-secondary)"
|
|
1281
|
-
},
|
|
1282
|
-
"desc": {
|
|
1283
|
-
size: "var(--font-sm)",
|
|
1284
|
-
weight: "400",
|
|
1285
|
-
lineHeight: "1.4",
|
|
1286
|
-
color: "var(--text-subtle)"
|
|
1287
|
-
},
|
|
1288
|
-
"caption": {
|
|
1289
|
-
size: "var(--font-xs)",
|
|
1290
|
-
weight: "500",
|
|
1291
|
-
lineHeight: "1.3",
|
|
1292
|
-
color: "var(--text-muted)"
|
|
1293
|
-
}
|
|
1294
|
-
};
|
|
1295
|
-
function getCurrentTypographyVars() {
|
|
1296
|
-
const vars = {};
|
|
1297
|
-
for (const [role, cfg] of Object.entries(TYPOGRAPHY_ROLES)) {
|
|
1298
|
-
vars[`--text-${role}-size`] = cfg.size;
|
|
1299
|
-
vars[`--text-${role}-weight`] = cfg.weight;
|
|
1300
|
-
vars[`--text-${role}-line-height`] = cfg.lineHeight;
|
|
1301
|
-
vars[`--text-${role}-color`] = cfg.color;
|
|
1302
|
-
}
|
|
1303
|
-
return vars;
|
|
1304
|
-
}
|
|
1305
|
-
const THEME_CHANGE_EVENT = "hlw:theme-change";
|
|
1306
|
-
function buildThemeStyle() {
|
|
1307
|
-
return varsToStyle({
|
|
1308
|
-
...getCurrentFontVars(),
|
|
1309
|
-
...getCurrentThemeVars()
|
|
1310
|
-
});
|
|
1311
|
-
}
|
|
1312
|
-
function varsToStyle(vars) {
|
|
1313
|
-
return Object.entries(vars).map(([key, value]) => `${key}:${value}`).join(";") + ";";
|
|
1314
|
-
}
|
|
1315
|
-
function useThemePageStyle() {
|
|
1316
|
-
const store = useThemeStore();
|
|
1317
|
-
const themePageStyle = computed(() => {
|
|
1318
|
-
void store.scale;
|
|
1319
|
-
void store.primaryColor;
|
|
1320
|
-
return buildThemeStyle();
|
|
1321
|
-
});
|
|
1322
|
-
return { themePageStyle };
|
|
1323
|
-
}
|
|
1324
970
|
let _msg = null;
|
|
1325
971
|
let _utils = null;
|
|
1326
972
|
const hlw = {
|
|
@@ -1396,42 +1042,22 @@ const vCopy = {
|
|
|
1396
1042
|
}
|
|
1397
1043
|
};
|
|
1398
1044
|
export {
|
|
1399
|
-
APPEARANCE_KEY,
|
|
1400
|
-
APPEARANCE_PRESETS,
|
|
1401
|
-
APPEARANCE_VAR_MAP,
|
|
1402
1045
|
BaseService,
|
|
1403
|
-
DEFAULT_THEMES,
|
|
1404
|
-
FONT_PRESETS,
|
|
1405
|
-
FONT_SCALE_KEY,
|
|
1406
1046
|
PluginService,
|
|
1407
1047
|
ServiceNamespace,
|
|
1408
1048
|
ServicePrefix,
|
|
1409
|
-
THEME_CHANGE_EVENT,
|
|
1410
|
-
THEME_COLOR_KEY,
|
|
1411
|
-
THEME_SEMANTIC_COLORS,
|
|
1412
|
-
TYPOGRAPHY_ROLES,
|
|
1413
1049
|
adapters,
|
|
1414
1050
|
alistAdapter,
|
|
1415
1051
|
auth,
|
|
1416
|
-
buildThemeStyle,
|
|
1417
1052
|
clearDeviceCache,
|
|
1418
1053
|
copy,
|
|
1419
1054
|
cosAdapter,
|
|
1420
1055
|
download,
|
|
1421
1056
|
getAdapter,
|
|
1422
|
-
getCurrentAppearance,
|
|
1423
|
-
getCurrentAppearanceMode,
|
|
1424
|
-
getCurrentAppearanceVars,
|
|
1425
|
-
getCurrentFontScale,
|
|
1426
|
-
getCurrentFontVars,
|
|
1427
|
-
getCurrentThemeColor,
|
|
1428
|
-
getCurrentThemeVars,
|
|
1429
|
-
getCurrentTypographyVars,
|
|
1430
1057
|
hlw,
|
|
1431
1058
|
ossAdapter,
|
|
1432
1059
|
paste,
|
|
1433
1060
|
qiniuAdapter,
|
|
1434
|
-
resolveAppearance,
|
|
1435
1061
|
saveImage,
|
|
1436
1062
|
saveImageUrl,
|
|
1437
1063
|
saveVideoFile,
|
|
@@ -1448,8 +1074,6 @@ export {
|
|
|
1448
1074
|
useRefs,
|
|
1449
1075
|
useRequest,
|
|
1450
1076
|
useShare,
|
|
1451
|
-
useThemePageStyle,
|
|
1452
|
-
useThemeStore,
|
|
1453
1077
|
useUpload,
|
|
1454
1078
|
useUtils,
|
|
1455
1079
|
vCopy,
|
package/package.json
CHANGED
|
@@ -0,0 +1,121 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<view class="navbar">
|
|
3
|
+
<view :style="bar_style"></view>
|
|
4
|
+
<view class="header" :style="{ height: header_height + 'px' }">
|
|
5
|
+
<view @tap="tapBack" class="left" v-if="props.isBack">
|
|
6
|
+
<text class="i-fa6-solid-chevron-left icon-left"></text>
|
|
7
|
+
</view>
|
|
8
|
+
<text class="title">{{ title }}</text>
|
|
9
|
+
</view>
|
|
10
|
+
<view class="status-bar" v-if="theme != 'light-theme'">
|
|
11
|
+
<view class="within"></view>
|
|
12
|
+
</view>
|
|
13
|
+
</view>
|
|
14
|
+
<view :style="{ height: navbar_height + 'px' }"></view>
|
|
15
|
+
</template>
|
|
16
|
+
|
|
17
|
+
<script lang="ts" setup>
|
|
18
|
+
import { computed, ref } from "vue";
|
|
19
|
+
import { useTheme } from "@/core";
|
|
20
|
+
const { theme } = useTheme();
|
|
21
|
+
|
|
22
|
+
const statusBarHeight: number = uni.getSystemInfoSync()?.statusBarHeight || 0;
|
|
23
|
+
const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
|
|
24
|
+
|
|
25
|
+
const props = defineProps({
|
|
26
|
+
isBar: {
|
|
27
|
+
type: Boolean,
|
|
28
|
+
default: false,
|
|
29
|
+
},
|
|
30
|
+
title: {
|
|
31
|
+
type: String,
|
|
32
|
+
default: "",
|
|
33
|
+
},
|
|
34
|
+
isBack: {
|
|
35
|
+
type: Boolean,
|
|
36
|
+
default: false,
|
|
37
|
+
},
|
|
38
|
+
});
|
|
39
|
+
|
|
40
|
+
const bar_style = computed(() => {
|
|
41
|
+
const style = {
|
|
42
|
+
height: statusBarHeight + "px",
|
|
43
|
+
};
|
|
44
|
+
return style;
|
|
45
|
+
});
|
|
46
|
+
let status_bar_height = 0;
|
|
47
|
+
if (props.isBar) {
|
|
48
|
+
status_bar_height = 15;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
const header_height = ref<number>(menuButtonInfo.bottom - statusBarHeight + 3);
|
|
52
|
+
const navbar_height = ref(header_height.value + statusBarHeight);
|
|
53
|
+
const status_bar_height_style = `${status_bar_height}px`;
|
|
54
|
+
|
|
55
|
+
function tapBack() {
|
|
56
|
+
uni.navigateBack({
|
|
57
|
+
fail: (err) => {
|
|
58
|
+
uni.reLaunch({
|
|
59
|
+
url: "/pages/index/index",
|
|
60
|
+
});
|
|
61
|
+
},
|
|
62
|
+
});
|
|
63
|
+
}
|
|
64
|
+
</script>
|
|
65
|
+
|
|
66
|
+
<style lang="scss" scoped>
|
|
67
|
+
.navbar {
|
|
68
|
+
display: flex;
|
|
69
|
+
flex-direction: column;
|
|
70
|
+
background-color: var(--navbar-bg-color);
|
|
71
|
+
position: fixed;
|
|
72
|
+
width: 750rpx;
|
|
73
|
+
z-index: 999;
|
|
74
|
+
border-bottom: var(--navbar-border-bottom);
|
|
75
|
+
|
|
76
|
+
.header {
|
|
77
|
+
display: flex;
|
|
78
|
+
flex-direction: row;
|
|
79
|
+
align-items: center;
|
|
80
|
+
justify-content: center;
|
|
81
|
+
position: relative;
|
|
82
|
+
|
|
83
|
+
.left {
|
|
84
|
+
position: absolute;
|
|
85
|
+
display: flex;
|
|
86
|
+
align-items: center;
|
|
87
|
+
justify-content: center;
|
|
88
|
+
left: 0rpx;
|
|
89
|
+
width: 100rpx;
|
|
90
|
+
height: 100%;
|
|
91
|
+
|
|
92
|
+
.icon-left {
|
|
93
|
+
color: var(--navbar-left-color);
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.title {
|
|
98
|
+
font-size: var(--navbar-font-size);
|
|
99
|
+
color: var(--navbar-title-color);
|
|
100
|
+
letter-spacing: 3rpx;
|
|
101
|
+
font-weight: bold;
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
.status-bar {
|
|
106
|
+
background-color: var(--navbar-bg-color);
|
|
107
|
+
height: v-bind(status_bar_height_style);
|
|
108
|
+
width: 750rpx;
|
|
109
|
+
position: relative;
|
|
110
|
+
|
|
111
|
+
.within {
|
|
112
|
+
position: absolute;
|
|
113
|
+
width: 750rpx;
|
|
114
|
+
height: v-bind(status_bar_height_style);
|
|
115
|
+
background-color: var(--bg-color);
|
|
116
|
+
border-top-left-radius: var(--status-bar-border);
|
|
117
|
+
border-top-right-radius: var(--status-bar-border);
|
|
118
|
+
}
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
</style>
|